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.

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?
  3. The other possibilities....

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:

This menu is "no 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:

This menu is fixed when scrolling the page

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.

Replace the classic Divi menu with a Full Screen Menu module
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:

Full Screen Module in 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 "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 insertion of JavaScript and CSS in Divi.

Sticky menu with Divi
Get a Sticky Menu with Divi thanks to the Code module
  1. In the "Full Screen Section" where you have 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 "Code" modules in this full screen section.
  7. In one, insert Javascript (between two tags )
  8. In the other, insert CSS (between two tags )

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:9999;}

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 file and import it into your Divi Library. 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, with no charge.

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

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!

Divi docker menu
diam Nullam dolor libero nunc mattis porta. eget Aliquam

Pin It on Pinterest

Shares
Share This