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.

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 ?
  3. Les autres possibilités…

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 :

Ce menu est fixe lorsqu’on scrolle la page

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 » 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’insertion de JavaScript et CSS dans 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 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 » au sein de cette section plein écran.
  7. Dans un, insérez du Javascript (entre deux balises <script> et e</script>)
  8. Dans l’autre, insérez du CSS (entre deux balises <style> et </style>)

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

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 fichier et de l’importer dans votre Bibliothèque Divi. 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, sans contrepartie.

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

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
mattis sed et, Praesent luctus elit.

Pin It on Pinterest

Shares
Share This