How to get a "sticky on scroll" menu with Divi?

To obtain a « sticky on scroll menu » you won't need theme child or special knowledge of code. You will be able to achieve this effect directly with the help of Native features of Divi or using a third-party plugin.

In this article, I propose that create a nice menu/header that will change the classic provisions proposed by the theme Divi.

You will then get a original layout In a few minutes.

Here is the program of this article:

1. What is a "sticky on scroll menu"?
2. How to get a sticky menu in 3 simple steps without plugin?
   • Step 1: Remove the classic Divi menu
   • Step 2: Add a Full Screen Divi Menu Module
   • Step 3: Set the menu at the top of the screen when scrolling the page
     • Option 1: JS code and CSS of the video tutorial
     • Option 2: JS and CSS code with OffSet value defined
     • Option 3: JS and CSS code for embossed layout
3. Get a stickery menu on the scroll using a plugin (ideal beginner)
4. Another nice menu idea...

1 – What is a "sticky on scroll menu"?

One menu sticky on scroll is a menu that becomes fixed when you go down below within a web page. This action of scrolling the page down calls the "Scroll".

In French, this could be translated into: a menu that becomes fixed to scrolling the page.

Basic, this feature already exists for the Divi's classic menu.

I advise you to read this article that deals with features offered by Divi to modify the header of its site.

But what if we use the Divi Full Screen Menu module ?

Indeed, if you insert this module into your layout, you will see that the menu slides over and disappears beyond the window when you arrive at the bottom of the page. As this video shows:

This is not good for "user experience" of your visitors. They must have the possibility to navigate within the different pages of your site, no matter where they are (so even when they arrive at the bottom of your page, the menu must be visible).

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

2 - How to get a sticky menu in 3 simple steps?

Here is a video of what we will do in a few simple steps:

Step 1: Remove the classic Divi menu

If you use the Full Screen Menu module within a layout, it is highly likely that you need remove the display from the main menu of your siteon the same page.

This is done in one click: discover the tuto to remove Divi menuThen come back here to continue.

Step 2: Add a Full Screen Divi Menu Module

Once your page n, you can insert Full Screen Menu. Here's how:

1. Add a new section by clicking on the icon « + »At the desired place.
2. You must choose a section « Full Screen » (purple).
3. Within this section, insert a Full Screen Menu module
4. In module settings, go to the tab "Content" and select the menu to display. Note that this menu must already exist. You need to create it upstream to the tab « Appearance > Menu » from your WordPress site.
5. You will see this menu appear in your Full Screen section.
6. Finally, using tabs Style and "Advanced", you can customize your menu: change color, alignment, font size etc.

Don't forget to save your changes.

Step 3: Set the menu at the top of the screen when scrolling the page

For now, you should be in possession of a page whose classic menu has been hidden and whose module « Full Screen Menu » scroll with the content of the page.

Now we'll add a few lines of code so that the menu is fixed at the top of the screen when you go down to the bottom of the page.

For this, you will need insert two "Full width code" modules within your full screen section.

If you do not yet know how to use this module a little special, I invite you to read this article dedicated to use of the Divi Code module.

1. Within the « Full Screen Section » where you have previously inserted the module « Full Screen Menu »,
2. Click on the wheel icon to open the section settings
3. Go to the tab "Advanced"
4. In the field CSS ID, enter the identifier "admenu"
5. In the field CSS class, enter the class "adheader"
6. Insert 2 modules Code in full width within this full screen section.
7. In the first, insert Javascript between two tags <script> and </script>.
8. In the second, insert CSS between two tags <style> and </style>.

Step 3 – Option 1: JS code and CSS video tutorial

This code is the one used for my tutorial video. However, some users encounter problems with this one, as you can see in the comments. If this is your case, go to Option 2.

Here is the JavaScript code to use:

window.onscroll=function(){myFunction()};var adheader=document.getElementById("admenu"),sticky=adheader.offsetTop;function myFunction(){window.pageYOffset>sticky?adheader.classList.add("sticky"):adheader.classList.remove("sticky")}

Note that to create this code, I helped myself with the original code available here.

Here is the CSS code to use:

.sticky {
position:fixed;
top:0;
width:100%;
z-index:9990;
}

Step 3 – Option 2: JS and CSS code with OffSet value defined

The previous JavaScript code did not give a value (distance) for The appearance of the menu at the scroll.

That's why some users said "do not see the menu appear at front-end while it exists in back-end".

As the menu sticky can be inserted anywhere within your layout, its location can make the final lens modified.

Depending on your project, the length of your layout and where you want to insert the menu, the previous JS and CSS code must be modified by the following:

var stickyEl=document.querySelector('#admenu')
 var stickyPosition=stickyEl.getBoundingClientRect().top;var offset=500
 window.addEventListener('scroll',function(){if(window.pageYOffset>=stickyPosition+offset){stickyEl.style.position='fixed';stickyEl.style.top='0px'}else{stickyEl.style.position='static';stickyEl.style.top=''}})

I was inspired by original code here.

Remember to insert this code into a module "full width code" and surround it with beacons <script> and </script>.

Note also that depending on the length of the layout that you use, you will have to "Play" with offset value. For this example code, the offset is 500. If you encounter problems, change this value to a more appropriate positive or negative value. For example: 250, 120, 380 or even -50, -20 etc.).

The offset allows to define the value of a distance from a parent element. More info here.

This JS code must be accompanied by the following CSS code (in a different code module):

.adheader {
width:100%;
z-index:9990;
}

This code should be surrounded by tags <style> and </style>

Step 3 – Option 3: JS and CSS code for embossed layout

If your site uses a page layout (boxed layout), the code to be used will have to be slightly changed.

Here is the JS to use:

var stickyEl=document.querySelector('#admenu')
 var stickyPosition=stickyEl.getBoundingClientRect().top;var offset=200
 window.addEventListener('scroll',function(){if(window.pageYOffset>=stickyPosition+offset){stickyEl.style.position='fixed';stickyEl.style.top='0px';stickyEl.style.width='90%'}else{stickyEl.style.position='static';stickyEl.style.width='100%';stickyEl.style.top=''}})

For this code too, you will need to "Play with offset values" so that he will agree to your layout.

Here is the CSS to use:

.adheader {
width:100%;
z-index:9990;
}

Sometimes copying and pasting a code online may not work... Therefore, I suggest you download the complete section, ready to use. Simply unzip the folder and import the file(s) .json of your choice, within your Divi Library. You will find the various options within the folder. Then you will be able to insert this section wherever you wish in your site. Simply choose your menu to display and customize this menu to your liking. Note that this download is free and without consideration.

Download full screen section with Sticky on Scroll Menu sticky-menu-on-scroll-ok-17092019.zip – Téléchargé 9113 fois – 7,57 Ko

3 – Get a stickery menu on the scroll using a plugin (ideal beginner)

The steps seen in the previous chapter of this article may not suit you, for X or Y reasons.

Besides, if you read the comments, some users encounter problems with the proposed JS codes. However, these codes work well: I checked and optimized them a few days ago on my test sites.

So, to meet the need of all types of users, I tested another solution for you: using a plugin that offers this feature.

Good news, I found 2 completely functional and easy to use.

Then I suggest you discover them:

• Sticky Menu (gold Anything!) on scroll
• My Sticky Menu

Whether you choose one or the other, you will need:

1. From remove the main menu from your page as explained to Step 1 of Chapter 2 of this Article.
2. Add a full screen section (Divi violet section) in which you will place a module "Full screen menu" as explained to Step 2 of Chapter 2 of this Article.
3. Add CSS ID to your full screen menu module from the advanced parameters of the module. For my example, I use "adheader", as you can see on the capture below.

Then, depending on the plugin you choose, here is what you can do:

3.1 – Sticky Menu (gold Anything!) on scroll

Install and activate the plugin as usual. You will find its settings on the tab Settings > Sticky Menu (gold Anything!)

In the "Basic Settings" tab, just enter the CSS ID of your menu. In my case, it's #adheader.

Other options are also present, don't hesitate to browse them and test them according to your needs.

For my test, I only added my CSS ID.

Then go to the tab Advanced settings and simply enter a value for Z-Index.

The Z-Index allows the elements of your layout to overlap. Z-index 1 will be placed all below and the Z-index 9999 will be placed all above. You must imagine your layout as a layer overlay.

I recommend: a z-index of 9990 9999 is used by other elements, especially when the Visual Builder is active.

There! With these two very small settings, you easily get a menu that is fixed when one scrols down and then gets back to its place when one scrols up!

3.2 – My Sticky Menu

I have a small preference for the previous plugin (Sticky Menu or Anything!) which offers more options all available in the free version.

But this one works well too. Once activated, go to the tab Settings > myStickyMenu.

1. Select Sticky Menu Upstairs.
2. Sticky class: select Other Class or ID then enter your CSS ID. For my example, #adheader.
3. Settings: Enter a z-index of 9990
4. Save your changes.

That's it! Your sticky menu with scroll must be functional.

In both cases, whether you're using one or the other, you'll need to add this CSS ID to any element of your layout in the future to make it sticky to the scroll. On the other hand, if you need to fix several items within a single page, you will then have to use a CSS CLASS instead of d-ID (because an ID must always be unique within a page).

4 - Other ideas for nice menus...

How about this? menu fixed at the top of the screen when user goes down the page?

This type of menu is not new, you must have seen sites that use it.

In the same spirit, I propose that you realize a « fixed footer menu » or create a transparent menu in a Hero section.

Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos!