Découvrez les bons plans & les réductions Alpa14

Un menu hamburger ? en vue ordinateur : site WordPress Divi

Alpa14 les tutoriels faciles !

Catégories

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 intéressé par les articles suivants :

Thème Divi : Personnaliser le header

Thème Divi : Personnaliser le header

Dans ce tutoriel vidéo, je vous montre comment personnaliser l’en-tête d’un site Divi.
Cet en-tête changera en scrollant, lorsque la page défile. Le logo, le menu et le fond du header changeront de couleur attirant ainsi davantage l’attention du visiteur.
Cet en-tête comprendra également un bouton d’appel à l’action incitant à davantage d’engagement.
Grâce au constructeur de thèmes (le thème Builder) du thème Divi, nous pouvons créer des en-têtes personnalisés au design poussé.

lire plus
Ajouter un footer WordPress Divi personnalisé

Ajouter un footer WordPress Divi personnalisé

Ajouter un footer WordPress ? Rien de plus simple grâce au Thème Builder de Divi. Faire un pied de page WordPress global devient un jeu d’enfant ! C’est ce que je vous montre dans ce tutoriel Vidéo Divi, comment créer un footer WordPress personnalisé en le désignant de manière très fine avec Divi Visual Builder d’Elegant Themes.

lire plus
Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Dans ce tutoriel Divi WordPress, je vous montre où trouver une image de qualité gratuite pour un usage commercial, je vous montre également comment la choisir et l’optimiser au bon format. Je vous apprends ensuite comment designer ce bandeau large « Hero Image » grâce au Divi Visual Builder du thème Divi de la société Elegant Themes.

lire plus