Construisez de magnifiques sites Web WordPress en utilisant Divi et Divi Builder

Comment ajouter un menu hamburger sur l'en-tête avec Divi

Rifat Tutoriels Divi Jun 9, 2021

Divi est un thème massivement personnalisable car il existe de nombreuses opportunités dans chaque section pour mettre en œuvre de nouveaux designs uniques. Un site Web comporte de nombreuses sections telles que l'en-tête, le pied de page, le corps, etc. Parmi elles, la section d'en-tête est l'une des plus importantes car elle contient des liens vers des pages importantes de votre site que les clients potentiels voudront souvent visiter. En outre, il fournit des points clés sur votre site Web qui encouragent votre client à explorer davantage. Dans le didacticiel d'aujourd'hui, vous verrez comment ajouter une bascule de menu hamburger dans le menu d'en-tête de navigation supérieur. On sait généralement que le menu hamburger est utilisé pour les petits écrans. Mais aujourd'hui, nous le verrons en mode bureau. Ne perdons plus de temps et commençons notre tutoriel d'aujourd'hui.

Aperçu

Aujourd'hui, nous allons créer ce design où le menu de navigation sera caché derrière le menu hamburger.

Première partie : modèle d'en-tête global.

Nous allons commencer par aller dans le générateur de thème Divi et cliquer sur "Ajouter un en-tête global". Un menu apparaîtra et sélectionnera "Créer un en-tête global".

Sélectionnez « Créer à partir de zéro » et avancez.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Deuxième partie : Conception globale de l'en-tête

Paramètres : Section principale

Couleur de l'arrière plan

Nous allons maintenant commencer à concevoir l'en-tête. Tout d'abord, changez la couleur d'arrière-plan de la section initiale.

  • Couleur d'arrière-plan : #f6f9fb

Espacement

Ensuite, passez aux paramètres d'espacement sous l'onglet Conception et rendez les rembourrages supérieur et inférieur à zéro.

  • Rembourrage supérieur : 0px
  • Rembourrage inférieur : 0px

Ajout : Nouvelle ligne

Allons plus loin en ajoutant une nouvelle ligne à notre conception. Choisissez la mention de ligne dans l'image.

Dimensionnement

Avant d'ajouter d'autres modules, modifiez la taille des lignes.

  • Largeur maximale : 1280px

Espacement

Ajustez le rembourrage supérieur et inférieur.

  • Rembourrage supérieur : 5px
  • Rembourrage inférieur : 5px

Ajout : Module de menu à la colonne

Sélection de menus

Ajoutez maintenant un module de menu à la colonne de la nouvelle ligne et sélectionnez un menu.

Ajouter un logo

Ajoutez maintenant un logo au module.

Supprimer la couleur d'arrière-plan

Ensuite, supprimez la couleur d'arrière-plan par défaut du module.

Paramètres : Texte du menu

Depuis l'onglet conception de ce module et modifiez les paramètres du texte du menu en conséquence :

  • Police du menu : Poppins
  • Poids de la police du menu : semi-gras
  • Couleur du texte du menu : #003e51
  • Taille du texte du menu : 16px
  • Alignement du texte : à droite

Paramètres : menu déroulant

Modifiez ensuite les paramètres du menu déroulant.

  • Couleur de la ligne du menu déroulant : #7159c8

Paramètres : Icônes

Modifiez également les paramètres des icônes.

  • Couleur de l'icône du panier d'achat : #670fff
  • Couleur de l'icône de recherche : #670fff
  • Couleur de l'icône du menu hamburger : #670fff

Dimensionnement

Dans les paramètres de dimensionnement, modifiez la largeur maximale du logo.

  • Largeur maximale du logo : 60 px

Espacement

Faites quelques ajustements à l'espacement.

  • Marge inférieure : 0px

Tourner la section collante

Notre manu est maintenant en place. Il est donc temps de rendre la section collante. Dans les paramètres de la section, accédez à l'onglet avancé et effectuez le réglage mentionné ci-dessous.

  • Position collante : coller au sommet
  • Décalage des éléments collants environnants : Oui
  • Transition par défaut et styles collants : oui

Couleur d'arrière-plan : mode collant

Maintenant, modifiez la couleur d'arrière-plan de toute la section en condition collante.

  • Couleur d'arrière-plan : #ffffff

Ombre : Mode collant

Appliquez également une ombre de boîte à la section à partir de l'onglet Conception.

  • Couleur de l'ombre par défaut : rgba(0,0,0,0)
  • Couleur de l'ombre collante : rgba(0,0,0,0.04)

Troisième partie : basculement de l'icône du hamburger

ID CSS du module de menu

Nous nous concentrerons sur la création de l'icône de basculement de l'icône du hamburger sur le bureau dans la prochaine partie du didacticiel. Tout d'abord, ouvrez les paramètres du module de menu, accédez à l'onglet avancé et attribuez un identifiant CSS.

  • Identifiant CSS : divi-menu

Ajouter un module de code

Ajoutez maintenant un module de code sous le module de menu.

Code CSS

Maintenant, ajoutez la balise Style et placez le code à l'intérieur de la balise.

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Code JQuery

Ensuite, ajoutez la balise Script et placez le code à l'intérieur de la balise.

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

toggleIcon.insertAfter(desktopMenu);

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});
 
});
});

Maintenant, enregistrez la progression et revenez à l'option Divi Builder en appuyant sur la croix en haut à droite.

Résultat final

Puisque nous avons passé avec succès toutes les étapes, voici à quoi ressemble notre design d'aujourd'hui.

Dernières pensées

Vous pouvez être créatif de nombreuses manières avec Divi. Il vous donne une liberté totale pour concevoir votre site Web selon vos besoins. Aujourd'hui, vous avez vu l'ajout d'un menu de navigation supérieur à l'intérieur du menu hamburger sur la vue du bureau. J'espère que cela vous aidera à créer des titres plus créatifs, et si vous trouvez ce tutoriel utile, un partage avec vos amis sera INCROYABLE !