To obtain a "sticky on scroll menu" you will not need to children's theme or any special knowledge of code. You can achieve this effect directly using Divi's native features or using a third-party plugin.

In this article, I suggest you create a cool menu/header that will change the classic layouts proposed by the Divi theme.

You will then obtain a original layout (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 easy steps without a plugin?
  3. Get a sticky scroll menu using a plugin (ideal for beginners)
  4. Another nice menu idea....

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

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

In French, we could translate this as: a menu that becomes fixed when the page is scrolled.

This functionality already exists for Divi's classic menu.

I advise you to read this article which 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 slips as you scroll and disappears beyond the window when you get to the bottom of the page. As this video shows:

Ce menu est « non sticky »

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

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

Here, in video, is what we will achieve in a few simple steps:

If you use the "Full Screen Menu" module within a layout, it is highly likely that you will need to remove the display of the main menu of your site, on the same page.

Remplacer le menu classique de Divi par module Menu Plein Ecran
The Full Screen Menu module replaces the classic Divi menu

This is done in one click: discover the tuto to delete the Divi menuand then come back here to continue.

Once your page no longer displays the main menu of your site, you can insert a Full Screen Menu. Here's how to do it:

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

Don't forget to save your changes.

For now, you should have a page whose classic menu has been hidden and whose "Full Screen Menu" module scrolls with the page content.

Now, we will add a few lines of code so that the menu is fixed at the top of the screen when we go down at the bottom of the page.

To do this, you will need to insert two "Full width code" modules into your full screen section.

If you don't know how to use this special module yet, I invite you to read this article dedicated to the use of the Divi Code module.

Menu Sticky avec Divi
Get a Sticky Menu with Divi thanks to the Code module
  1. In the "Full Screen Section" where you previously inserted the "Full Screen Menu" module,
  2. Click on the wheel icon to open the section settings
  3. Go to the "Advanced" tab
  4. In the CSS ID field, enter the "admenu" identifier
  5. In the CSS Class field, enter the "adheader" class
  6. Insert 2 "Full width code" modules into this full screen section.
  7. In the first one, insert Javascript between two tags .
  8. In the second, insert CSS between two tags .

This code is the one used for my tuto-video. However, some users have problems with it, 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 used the original code available here.

Here is the CSS code to use:

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

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

This is why some users said "do not see the menu appear on the front end when it does exist on the back end".

Since the sticky menu can be inserted anywhere within your layout, its location can make the final objective change.

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 the original code here.

Don't forget to insert this code in a "full width code" module and surround it with tags

Also note that depending on the length of the layout you use, you will have to "play" with the 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).

Offset is used 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 will have to be surrounded by tags

If your site uses a boxed layout (boxed layout)the code to be used will have to be modified a little.

Here is the SB 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 have to "play with the offset values" to make it fit your layout.

Here is the CSS to use:

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

Sometimes, copying and pasting a code online may not work... That's why I suggest you download the complete, ready-to-use Section. All you have to do is unzip the folder and import the.json file(s) of your choice into your Divi Library. You will find the various options within the folder. Then, you can insert this section where you want in your site. You will simply have to choose your menu to display and customize this menu to your taste. Note that this download is free and free of charge.

"Full Screen Section with Sticky on Scroll Menu" Downloaded 132 times

The steps seen in the previous chapter of this article may not be appropriate for you, for a reason X or Y.

Moreover, 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 needs of all types of users, I tested another solution for you: use a plugin that offers this feature.

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

I suggest you then to discover them:

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

  1. To remove the main menu from your page as explained in at Step 1 of Chapter 2 of this Article.
  2. Add a full screen section (Divi violet section) in which you will place a "Full Screen Menu" module as explained in at Step 2 of Chapter 2 of this Article.
  3. Add a CSS ID to your Full Screen Menu module from the module's advanced settings. For my example, I use "adheader", as you can see on the capture below.
ID CSS pour obtenir un menu Sticky
Add a CSS ID (adheader) to get a Sticky on scroll menu

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

3.1 - Sticky Menu (or Anything!) on scroll

Sticky Menu or Anything

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

Sticky Menu - Basic Settings
Sticky Menu - basic settings tab

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

Other options are also available, feel free to browse and test them according to your needs.

For my test, I only added my CSS ID.

Sticky Menu - advanced setting
Sticky Menu - advanced settings tab

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

The Z-Index allows the elements of your layout to overlap. Z-index 1 will be placed at the bottom and Z-index 9999 will be placed at the top. You must imagine your layout as an overlay of layers.

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

That's it! That's it! With these two very small settings, you easily get a menu that fixes itself when you scroll down and then puts itself back in its place when you scroll up!

3.2 - My Sticky Menu

My Sticky Menu

I have a slight 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. As soon as it is activated, go to the tab Settings > myStickyMenu.

My Sticky Menu - réglages
My Sticky Menu - settings
  1. Select "Sticky Menu" at the very top.
  2. Sticky Class: select "other Class or ID" and enter your CSS ID. For my example, it's #adheader.
  3. Settings: enter a z-index of 9990
  4. Save your changes.

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

In both cases, whether you use either one or the other, in the future, you will only have to add this CSS ID to any element of your layout to make it sticky to scroll. On the other hand, if you need to fix several elements within the same page, you will have to use a CSS CLASS instead of ID (because an ID must always be unique within a page).

What about this menu that is set at the top of the screen when the user moves down to the bottom of the page?

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

In the same spirit, I propose that you carry out a "footer docker menu" thanks to this other tutorial.

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

menu fixe Divi

Pin It on Pinterest

Shares
Share This