fbpx

Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

Un menu hamburger en vue desktop ? Pourquoi pas ! 😀

Sur Internet, le terme de “hamburger menu” dĂ©signe un menu de navigation utilisĂ© sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran Ă©tant restreinte pour conserver un menu classique. Sur ces pĂ©riphĂ©riques mobiles, on masque alors le menu derriĂšre un bouton Ă  3 petits traits ressemblant Ă  un hamburger.
On retrouve cela aujourd’hui avec les sites web dits responsives qui  changent automatiquement leur menu classique pour un menu hamburger lorsque la largeur de l’Ă©cran diminue. C’est d’ailleurs le cas pour les sites WordPress Divi par exemple.
Il arrive cependant que pour des raisons esthĂ©tiques et dans le but d’un design Ă©purĂ© sans doute que certains sites adoptent le menu hamburger en vue ordinateur (desktop).

Dans ce court tutoriel, je vous propose donc de vous vous montrer grĂące Ă  l’ajout de quelques lignes de code CSS comment conserver l’icĂŽne du hamburger menu en vue ordinateur pour votre site web Divi.

 

Licence Divi
Code Promo Divi Supreme
.

Le module « Menu » de Divi

Le code CSS que je vous proposes dans ce tutoriel va s’appliquer au module « Menu » de toutes les pages. Le menu par dĂ©faut du thĂšme Divi, prĂ©sent dans l’entĂȘte n’est pas un module Divi Ă©ditable comme les autres modules de la page. Il est donc nĂ©cessaire d’aller crĂ©er un nouvel entĂȘte dans le ThĂšme Builder dans lequel cette fois-ci on pourra placer le module « Menu » de Divi.

Pour cela, rendez-vous dans votre menu WordPress puis Divi > Theme Builder. Ajouter un entĂȘte global afin qu’il se retrouve sur toutes les pages du site. Puis dans la section qui apparaĂźtra, insĂ©rer une rangĂ©e Ă  une colonne et insĂ©rer dans cette rangĂ©e le module « Menu ». Mettez-le ensuite en forme selon vos goĂ»ts.

Divi ThĂšme Builder
entĂȘte-dans-theme-builder

Le code CSS Ă  appliquer pour obtenir le menu hamburger en vue ordinateur (desktop)

Une fois que votre module « Menu » est en place et dĂ©signĂ© dans le thĂšme Builder (entĂȘte global). Sauvegarder votre travail et rendez vous dans votre menu WordPress Ă  Divi > Option du ThĂšme (onglet gĂ©nĂ©ral). Puis au bas de la page Ă  « Personnaliser CSS » coller le code suivant, et hop le tour est jouĂ© ! 🙂

/*afficher le hamburger menu en vue ordinateur*/

@media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
display: none;
}

.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}

.et_pb_menu .et_mobile_nav_menu li {
list-style-type: none;
}

code CSS Menu hamburger desktop
Menus
Formation WordPress
Hostinger hébergement web

Vous serez peut-ĂȘtre Ă©galement intĂ©ressĂ© par ces articles …

Divi Supreme : Content Timeline

Divi Supreme : Content Timeline

Divi Supreme Content Timeline : Une ligne de temps de contenu claire et engageante Dans ce tutoriel WordPress Divi, je vous présente le module Divi Supreme Content Timeline qui vous permet de créer facilement une chronologie de contenu pour...

lire plus
Créer un site WordPress parfaitement responsive

Créer un site WordPress parfaitement responsive

Dans cette vidĂ©o, je vous montre comment crĂ©er un site web WordPress responsive en utilisant le thĂšme Divi et son Visual Builder. Je vous explique comment utiliser les puissantes fonctionnalitĂ©s intĂ©grĂ©es Ă  Divi pour crĂ©er un site Web professionnel qui aura fiĂšre allure sur n’importe quel appareil en s’adaptant parfaitement Ă  son Ă©cran.

lire plus
Créer son premier Site Web Professionnel 

Créer son premier Site Web Professionnel 

Dans cette vidĂ©o qui est qui est la retransmission d’un Webinar, LĂ©opoldine la fondatrice de la sociĂ©tĂ© Webmyday spĂ©cialisĂ©e dans la formation WordPress Divi, explique les diffĂ©rentes Ă©tapes Ă  suivre et les bonnes questions Ă  se poser pour crĂ©er son premier site web professionnel.

lire plus
Offrez-moi un café! Merci :)