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.
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.
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;
}
