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 …

Tutoriel Divi : Inverser les colonnes selon la vue

Tutoriel Divi : Inverser les colonnes selon la vue

En vue ordinateur un site web peut avoir un design avantageux mais peut ĂȘtre moins en vue mobile du fait des colonnes d’une rangĂ©e qui passent les unes sous les autres.
On peut alors se trouver avec une suite d’Ă©lĂ©ments non souhaitĂ©e avec par exemple 2 textes ou 2 images Ă  la suite.

lire plus
10 extensions Chrome pour améliorer la productivité

10 extensions Chrome pour améliorer la productivité

Dans cette vidĂ©o, je vous prĂ©sente 10 extensions pour le navigateur Chrome afin d’amĂ©liorer votre confort, votre rapiditĂ© et donc votre productivitĂ© lorsque vous surfez sur Internet. Il existe ne nombreuses extensions Chrome, et il peut ĂȘtre difficile de trouver celles qui vont rĂ©ellement amĂ©liorer votre productivitĂ©.

lire plus
8 sites GRATUITS  pour tous vos projets Web

8 sites GRATUITS pour tous vos projets Web

Il existe des tonnes de ressources pour le développement Web, mais lesquelles sont gratuites pour une utilisation personnelle et surtout commerciale ? Dans cette vidéo et cet article, je vous présente 8 sites GRATUITS et indispensables pour tous vos projets web.

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