How do I get a sticky on scroll menu with Divi?

Updated on 02/10/2019 | Published on 15/07/2019 | 27 comments

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. Dans le premier, insérez du Javascript <strong>entre deux balises <script> et </script></strong>.
  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.

N’oubliez pas d’insérer ce code dans un module<strong> « code en plein largeur »</strong> et entourez-le des balises<strong> <script> et </script></strong>

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 287 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 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
sticky scrool menu with Divi

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

27 Commentaires

  1. leslie

    Hello !

    un grand Merci pour ce tuto ! c’est exactement ce que je cherchais à réaliser !

    J’ai codé sans soucis, et même télécharger le menu pour vérifier que tout est bon … mon menu est visible dans mon builder, mais n’apparaît pas en visuel sur ma page.

    As-tu un conseil ?
    Dans l’attente de ta réponse.
    Merci

  2. kaellyana

    Bonjour,
    Merci pour ce tutoriel.
    Sur une page complète aucun soucis
    Mais si j’éssaie sur une page emboitée
    là.. j’ai un gros bug.
    Au scroll mon menu pleine largeur sors sur la droite.
    Je farfouille google mais je ne trouve rien là-dessus.
    Aurais-tu une idée?

  3. Lycia Diaz

    Salut Kaellyana. Effectivement, sur une mise en page emboitée, tu dois certainement modifier légèrement les classes CSS (je suppose, je n’ai pas testé). Il faut que tu inspectes le code dans ton navigateur et que tu fasses des essais pour trouver le CSS adéquat.

  4. Lycia Diaz

    Salut Leslie,
    C’est bizarre, tu as toujours le problème ?

  5. Hervé

    Bonjour,

    un grand Merci pour ces tutos et ce site en général il me permet de découvrir et d’utiliser plus facilement Divi !

    J’ai exactement le même problème que Leslie.

    As-tu un conseil ?
    Dans l’attente de ta réponse.
    Merci

  6. Lycia Diaz

    Hello Hervé !
    Je ne comptais pas allumer l’ordinateur ce soir (LOL) mais ça m’intrigue votre histoire avec Leslie… Alors, je viens de jeter un œil.
    J’ai téléchargé le module que j’ai mis à disposition dans l’article et je l’ai ajouté au sein d’un layout. Je le vois bien avec le Visual Builder actif mais je ne le vois plus lorsque je quitte le Visual Builder : comme Leslie.
    Par contre, si je désactive la navigation principale, là tout fonctionne bien.
    Donc « l’Étape 1 : supprimer le menu classique de Divi » du chapitre 2 de cet article est indispensable pour que cela fonctionne. Vous devez donc absolument supprimer le menu principal sur la page où vous souhaitez que le menu « sticky » apparaisse comme expliqué ici.
    Merci de me dire si le souci venait de là…

  7. Lycia Diaz

    Salut Kaellyana.
    Je viens de vérifier si le code fonctionnait bien avec une mise en page emboitée et oui, tout marche bien, il n’y a pas de soucis. Au début, je pensais qu’il aurait pu y avoir des soucis de CSS mais ce n’est pas le cas. Mon tuto et la section disponible en téléchargement fonctionne aussi bien pour une mise en page large que pour une mise en page emboitée. Es-tu réessayé depuis ?

  8. Hervé

    Salut Lycia ,

    Je suis parti d’une page blanche et j’ai bien suivi la procédure décrite.
    Blank Page + ajout du module.
    J’ai toujours le même soucis pour ma part, je vais creusé le problème y a pas de raison.

    Ma config : WordPress 5.2.3-fr, Divi 3.29.1 + thème enfant

  9. Lycia Diaz

    Salut Hervé,
    Je vais regarder à nouveau dans la semaine, pour voir si je ne serais pas passée à côté de quelque chose…

  10. Nathan Houtain

    Bonjour, quand je rajoute « adheader » dans ID Classe CSS mon menu disparaît, que faire ? Merci !

  11. Lycia Diaz

    Salut Nathan, Hervé, Kaellyana et Leslie.
    Je me suis un peu creusé les méninges ce matin… J’ai pris en compte tous vos commentaires et j’ai suivi mon tuto sur un site de test « tout neuf »… Et vous aviez raison, dans certains cas, le Menu Sticky disparait.
    Cela est dû à la longueur du layout et du scroll. Donc le premier code Javascript fonctionnait bien dans le cas où la page ne dépassait pas une certaine longueur.
    J’ai donc mis à jour mon tuto qui propose des alternatives à ce code Javascript (option 1, 2 et 3). Vous devrez cependant modifier la valeur du offset selon vos besoins, comme expliqué dans l’article.
    J’ai aussi rajouté une version pour ceux qui utilisent une mise en page « emboitée » (boxed layout).
    Bref, tout est à jour et les fichiers en téléchargement ont, eux aussi, été modifiés.
    Merci de me faire part de vos retours : ça devrait marcher maintenant 😉

  12. kaellyana

    Coucou Lycia, merci.
    Je test tout cela sous peu.
    Depuis l’autre fois je n’ai pas rouvert mon site test avec divi je suis en cours d’en fabriquer un pour une amie avec elementor.
    Et oui j’aime tout le monde.
    Mais dès que je test je reviens ici vous le dire.
    Et moi mon soucis c’est en mise en page emboité
    dès que je scroll le menu sort sur la droite et ne reste pas dans la mise en page
    et j’ai pas mal farfouiller et tester je ne trouvais pas de solutions.
    Alors je suis passé a autre chose en attendant de m’y remettre.

  13. Hervé

    Bonjour Lycia,

    Je suis donc parti sur l’option 2 mais je n’arrive pas à définir mon offset !
    Mon bloc avant fait 500 de hauteur max.
    Je loupe quelque chose.

    Hervé

  14. kaellyana

    hello, alors j’ai testé
    Je crois que j’avais répondu mais je ne sais plus ce que j’ai dit.
    Alors même avec ton code j’ai mon menu qui sortais toujours du côté droit
    Je vous joint une image pour montrer.
    https://i73.servimg.com/u/f73/11/03/13/46/menuem10.png
    et du coup j’ai modifié le code js
    https://i73.servimg.com/u/f73/11/03/13/46/menuem11.png

    au lieu de
    {stickyEl.style.position=’fixed’;stickyEl.style.top=’0px’;stickyEl.style.width=’90%’}else

    j’ai mis
    {stickyEl.style.position=’fixed’;stickyEl.style.top=’0px’;stickyEl.style.width=’71.8%’}else
    j’ai tatonner en testant la taille et avec ce 71.8 cela ne sors plus de la page.
    Après est-ce bien bon, je ne suis pas une pro du code alors je ne sais pas mais sur mon site de test cela fonctionne.

  15. Lycia Diaz

    Salut Kaellyana.
    C’est bizarre. Bon ben tant que ça marche… Il faudra quand même vérifier le rendu en version mobile.

  16. Hervé

    Bonjour Lycia,

    J’ai lu à nouveau ton tuto mais je n’arrive toujours pas a comprendre comment calculer la valeur de l’offset.
    Comment fait-on concrètement.
    Merci.

  17. Lycia Diaz

    Salut Hervé… Bon, j’ai fait encore plein d’essais. Ça marche mais j’ai aussi trouvé une alternative à l’aide de plugin facile à utiliser. Je viens de mettre l’article à jour (chapitre 3). Avec ces plugins, ça marche et en plus c’est ultra facile ! Alors, je préconiserais cette méthode qui pourra être réutiliser plusieurs fois facilement.

  18. Hervé

    Bonjour Lycia,

    Merci pour les plugins.
    J’ai installé « Sticky Menu (or Anything !) on scroll » et la’ai inactif sous chrome mais fonctionnel sous firefox ????
    Du coup j’ai Réinitialisé chrome et là magie ça marche, je réactive mes extensions et patatra plus rien !!!!
    Au final c’est l’extension « uBlock Origin » qui fou le boxon…..
    Du coup je reprendrai le tuto du début avec toutes les options proposées sans plugin dés que je peux et sans l’extension.
    De plus le fait d’être obligé de mettre ma page en « Blank-Page » m’ennuyait un peu du coup je suis passé par mon CSS du thème enfant en ajoutant
    « .page-id-60 #main-header {
    display: none;
    }
    #page-container {
    padding-top: 0px !important;
    } » bout de code adapté d’une de tes astuces qui me permet de supprimer le menu principal de la page « 60 » concernée par mon menu scroll en ayant une page « Modèle par défaut » et toujours ma barre infèrieure.
    Et tout marche.

    Merci pour tout.

  19. Lycia Diaz

    Merci Hervé.
    Effectivement chaque environnement de site est différent et quelquefois des plugins peuvent entrer en conflit. Je te conseille quand même de faire tes essais sur un site de dev et non sur ton vrai site. On ne sait jamais 😉 !

  20. Picron

    Bonjour Lycia,

    Merci de partager vos connaissance par le biais de ce site qui détail parfaitement la démarche à suivre ceci dit, peu importe la méthode choisie (1 ou 2), la page affiche 2 fois le menu avant le scroll.. auriez vous une idée pour solutionner cela ? Hormis ce petit défaut, tout se passe correctement..
    Merci d’avance
    Antoine

  21. Lycia Diaz

    Salut Picron,
    Merci à toi…
    As-tu bien choisi « blank page » ? À part cela, je ne vois pas d’où ça pourrait venir…

  22. Picron Antoine

    oui, j’ai bien mis blank dans le template de page, après je ne sais pas si c’est normal mais lorsque je rajoute la class css adheader, mon menu disparait..

  23. Antoine

    J’ai installé le plugin sticky menu, et ça fonctionne.. merci 🙂

  24. Lycia Diaz

    Normalement, il disparait lorsque le Visual Builder est actif. Une fois enregistré, tu devrais le voir en front (je dis bien : normalement) 😉

  25. Lycia Diaz

    Super ! 😉

  26. mssiote

    Bonjour
    merci pour cet article, c’ est exactement ce que je souhaitais faire, par contre j’ai souci je souhaiterais intégrer le logo dans le menu pleine page que j’ai crée , je n’arrive pas à trouver la solution?
    Merci pour votre aide

  27. Lycia Diaz

    Salut Mssiote. Dans un « menu pleine page » je ne suis pas sûre qu’on puisse ajouter un logo. Du moins avec les options… Il faudrait alors faire du codage, je pense…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This