Pour obtenir un « menu sticky on scroll » vous n’aurez pas besoin de thème enfant ni de connaissances particulières en code. Vous pourrez réaliser cet effet directement à l’aide des fonctionnalités natives de Divi ou à l’aide d’un plugin tiers.

Dans cet article, je vous propose de créer un menu/header sympa qui va changer des dispositions classiques proposées par le thème Divi.

Vous obtiendrez alors un layout (mise en page) original en quelques minutes.

Voici le programme de cet article :

  1. Qu’est-ce qu’un « menu sticky on scroll » ?
  2. Comment obtenir un menu sticky en 3 étapes simples sans plugin ?
  3. Obtenir un menu sticky au scroll à l’aide d’un plugin (idéal débutant)
  4. Une autre idée de menu sympa…

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

Un menu sticky on scroll est un menu qui devient fixe lorsqu’on descend plus bas au sein d’une page web. Cette action de faire défiler la page vers le bas s’appelle le « scroll ».

En français, on pourrait traduire cela par : un menu qui devient fixe au défilement de la page.

De base, cette fonctionnalité existe déjà pour le menu classique de Divi.

Je vous conseille de lire cet article qui traite des fonctionnalités offertes par Divi pour modifier l’en-tête de son site.

Mais qu’en est-il si on utilise le module « Menu Plein Écran » de Divi ?

Effectivement, si vous insérez ce module au sein de votre mise en page, vous verrez que le menu glisse au défilement et disparait au delà de la fenêtre lorsque vous arrivez en bas de la page. Comme le montre cette vidéo :

Ce menu est « non sticky »

Cela n’est pas bon pour « l’expérience utilisateur » de vos visiteurs. Ceux-ci doivent avoir la possibilité de naviguer au sein des différentes pages de votre site, peu importe l’endroit où ils se trouvent (donc même lorsqu’ils sont arrivés en bas de votre page, le menu doit être visible).

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

Voici, en vidéo, ce que nous allons réaliser en quelques étapes simples :

Si vous utilisez le module « Menu Plein Ecran » au sein d’un layout, il est fortement probable que vous ayez besoin de supprimer l’affichage du menu principal de votre site, sur cette même page.

Remplacer le menu classique de Divi par module Menu Plein Ecran
Le module Menu Plein Ecran remplace le menu classique de Divi

Cela se réalise en un clic : découvrez le tuto pour supprimer le menu de Divi, puis revenez ici pour continuer.

Une fois que votre page n’affiche plus le menu principal de votre site, vous pourrez insérer un Menu Plein Écran. Voici comment faire :

Module Plein Ecran dans Divi
Ajouter un module « Menu Plein Ecran » au sein d’une mise en page Divi
  1. Ajoutez une nouvelle section, en cliquant sur l’icône « + », à l’endroit souhaité.
  2. Vous devez choisir une section « Plein Écran » (en violet).
  3. Au sein de cette section, insérez un module « Menu Plein Écran »
  4. Dans les réglages du module, rendez-vous à l’onglet « Contenu » et sélectionnez le menu à afficher. Notez que ce menu doit être déjà existant. Vous devez le créer en amont à l’onglet « Apparence > Menu » de votre site WordPress.
  5. Vous verrez apparaitre ce menu au sein de votre section Plein Écran.
  6. Enfin, à l’aide des onglets « Style » et « Avancé », vous pourrez customiser votre menu : changer la couleur, l’alignement, la taille de la police etc.

N’oubliez pas d’enregistrer vos modifications.

Pour l’instant, vous devriez être en possession d’une page dont le menu classique a été caché et dont le module « Menu Plein Écran » défile avec le contenu de la page.

À présent, on va ajouter quelques lignes de code pour que le menu se fixe en haut de l’écran lorsqu’on descend en bas de la page.

Pour cela, vous aurez besoin d’insérer deux modules « Code en pleine largeur » au sein de votre section plein écran.

Si vous ne savez pas encore utiliser ce module un peu spécial, je vous invite à lire cet article dédié à l’utilisation du module Code de Divi.

Menu Sticky avec Divi
Obtenir un Menu Sticky avec Divi grâce au module Code
  1. Au sein de la « Section Plein Écran » où vous avez précédemment inséré le module « Menu Plein Écran »,
  2. Cliquez sur l’icône de la roue pour ouvrir les réglages de la section
  3. Rendez-vous à l’onglet « Avancé »
  4. Dans le champ ID CSS, saisissez l’identifiant « admenu »
  5. Dans le champ Classe CSS, saisissez la classe « adheader »
  6. Insérez 2 modules « Code en pleine largeur » au sein de cette section plein écran.
  7. Dans le premier, insérez du Javascript entre deux balises <script> et </script>.
  8. Dans le second, insérez du CSS entre deux balises <style> et </style>.

Ce code est celui utilisé pour mon tuto-vidéo. Toutefois, certains utilisateurs rencontrent des problèmes avec celui-ci, comme vous pouvez le voir dans les commentaires. Si c’est votre cas, passez à l’option 2.

Voici le code JavaScript à utiliser :

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")}

Notez que pour créer ce code, je me suis aidée du code original disponible ici.

Voici le code CSS à utiliser :

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

Le code JavaScript précédent ne donnait pas de valeur (distance) pour l’apparition du menu au scroll.

C’est pour cette raison que certains utilisateurs disaient « ne pas voir le menu apparaître en front-end alors qu’il existe bien en back-end ».

Étant donné que le menu sticky peut être inséré n’importe où au sein de votre layout, son emplacement peut rendre l’objectif final modifié.

Selon votre projet, la longueur de votre layout et l’endroit où vous souhaitez insérer le menu, le code JS et CSS précédent doit être modifié par les suivants :

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=''}})

Je me suis inspirée du code original ici.

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

Notez également que selon la longueur du layout que vous utilisez, vous devrez « jouer » avec la valeur du offset. Pour cet exemple de code, le offset est à 500. Si vous rencontrez des problèmes, modifiez cette valeur par une valeur positive ou négative plus appropriée. Par exemple : 250, 120, 380 ou même -50, -20 etc).

Le offset permet de définir la valeur d’une distance par rapport à un élément parent. Plus d’info ici.

Ce code JS devra être accompagné du code CSS suivant (dans un module code différent) :

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

Ce code devra être entouré des balises <style> et </style>

Si votre site utilise une mise en page emboitée (boxed layout), le code à utiliser devra être un peu modifié.

Voici le JS à utiliser :

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=''}})

Pour ce code aussi, vous devrez « jouer avec les valeurs du offset » pour qu’il s’accorde à votre layout.

Voici le CSS à utiliser :

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

Quelques fois, le fait de copier-coller un code en ligne peut ne pas fonctionner… C’est pourquoi, je vous propose de télécharger la Section complète, prête à utiliser. Il vous suffira de décompresser le dossier et d’importer le ou les fichiers .json de votre choix, au sein de votre Bibliothèque Divi. Vous trouverez les diverses options au sein du dossier. Ensuite, vous pourrez insérer cette section où vous le souhaitez dans votre site. Il faudra simplement choisir votre menu à afficher et customiser ce menu à votre goût. Notez que ce téléchargement est libre et sans contrepartie.

“Section Plein Écran avec Menu Sticky on Scroll” Téléchargé 156 fois

Les étapes vues dans le chapitre précédent de cet article pourraient ne pas vous convenir, pour une raison X ou Y.

D’ailleurs, si vous lisez les commentaires, certains utilisateurs rencontrent des problèmes avec les codes JS proposés. Pourtant, ces codes fonctionnent bien : je les ai vérifiés et optimisés il y a quelques jours sur mes sites de test.

Alors, pour répondre au besoin de tous les types d’utilisateurs, j’ai testé un autre solution pour vous : faire appel à un plugin qui propose cette fonctionnalité.

Bonne nouvelle, j’en ai trouvé 2 tout à fait fonctionnels et faciles à utiliser.

Je vous propose alors de les découvrir :

Que vous optiez pour l’un ou l’autre, vous aurez besoin, d’abord :

  1. De supprimer le menu principal de votre page comme expliqué à l’étape 1 du chapitre 2 de cet article.
  2. D’ajouter une section pleine écran (section Divi violette) dans laquelle vous placerez un module « Menu plein écran » comme expliqué à l’étape 2 du chapitre 2 de cet article.
  3. D’ajouter un ID CSS à votre module Menu Plein Ecran depuis les paramètres avancés du module. Pour mon exemple, j’utilise « adheader », comme vous pouvez le voir sur la capture ci-dessous.
ID CSS pour obtenir un menu Sticky
Ajoutez un ID CSS (adheader) pour obtenir un menu Sticky on scroll

Ensuite, selon le plugin que vous aurez choisi, voici ce que vous pourrez faire :

3.1 – Sticky Menu (or Anything !) on scroll

Sticky Menu or Anything

Installez et activez le plugin comme à votre habitude. Vous trouverez ses paramétrages à l’onglet Réglages > Sticky Menu (or Anything!)

Sticky Menu - Basic Settings
Sticky Menu – onglet réglages de base

Dans l’onglet « Basic Settings », il vous suffira de saisir l’ID CSS de votre menu. Dans mon cas, c’est « #adheader ».

D’autres options sont aussi présentes, n’hésitez pas à les parcourir et les tester selon vos besoins.

Pour mon test, j’ai seulement ajouté mon ID CSS.

Sticky Menu - advanced setting
Sticky Menu – onglet réglages avancés

Rendez-vous ensuite à l’onglet Advanced settings et saisissez simplement une valeur de Z-Index.

Le Z-Index permet aux éléments de votre layout de se superposer. Z-index 1 sera placé tout en dessous et le Z-index 9999 sera placé tout au-dessus. Il faut imaginer votre layout comme une superposition de calques.

Je vous recommande : un z-index de 9990 car le 9999 est utilisé par d’autres éléments, notamment lorsque le Visual Builder est actif.

Voilà ! Avec ces deux tout petits paramétrages, vous obtenez facilement un menu qui se fixe lorsqu’on scrolle vers le bas puis qui se remet à sa place lorsqu’on scrolle vers le haut !

3.2 – My Sticky Menu

My Sticky Menu

J’ai une petite préférence pour le plugin précédent (Sticky Menu or Anything !) qui offre plus options toutes disponibles dans la version gratuite.

Mais celui fonctionne bien aussi. Dès son activation, rendez-vous à l’onglet Réglages > myStickyMenu.

My Sticky Menu - réglages
My Sticky Menu – réglages
  1. Sélectionnez « Sticky Menu » tout en haut.
  2. Classe Sticky : sélectionnez « other Class or ID » puis saisissez votre ID CSS. Pour mon exemple, c’est #adheader.
  3. Settings : saisissez un z-index de 9990
  4. Enregistrez vos modifications.

C’est tout ! Votre menu sticky au scroll doit être fonctionnel.

Dans les deux cas, que vous utilisiez l’un ou l’autre, il vous suffira, à l’avenir, d’ajouter cet ID CSS à n’importe quel élément de votre layout pour que celui-ci devienne sticky au scroll. Par contre, si vous avez besoin de fixer plusieurs éléments au sein d’une même page, vous devrez alors utiliser une CLASSE CSS au lieu d’ID (car un ID doit toujours être unique au sein d’une page).

Que dites-vous de ce menu qui se fixe en haut de l’écran lorsque l’utilisateur descend plus bas dans la page ?

Ce type de menu n’est pas nouveau, vous avez certainement dû voir des sites qui l’utilisent.

Dans le même esprit, je vous propose de réaliser un « menu fixe en footer » grâce à cet autre tutoriel.

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

menu fixe Divi

Pin It on Pinterest

Shares
Share This