Divi – Comment ajuster les dimensions du menu déroulant ?

Nous avons vu comment personnaliser le header et le menu du thème Divi ?, voyons maintenant comment redimensionner (ajuster les dimensions) le menu déroulant.
Divi ajuster les dimensions du menu déroulant

Nous avons vu comment personnaliser le header et le menu du thème Divi ?, voyons maintenant comment redimensionner (ajuster les dimensions) le menu déroulant.

Divi n’offre pas de paramètres pour ajuster les dimensions du menu déroulant, nous allons donc devoir utiliser du CSS.

Le CSS devra être placé soit dans le fichier CSS de votre thème enfant (voir comment faire un thème enfant) ou bien dans la section CSS additionnel du personnaliseur de Divi.

divi css additionnel

Voici à quoi ressemble notre menu avant les modifications.

ajuster les dimensions du menu déroulant dans Divi

Divi donne une taille identique à la taille d’écriture du menu et du menu déroulant (dans cet exemple 19px). Vous ne pouvez pas ajuster l’un et l’autre différemment.

De plus, les dimensions des sous-menus ne sont pas forcément adaptées à ce que vous souhaitez. Il en est de même pour les marges internes (padding). Nous allons donc voir comment ajuster tous ces paramètres.

Je vous conseille de suivre ce tuto en faisant les modifications les unes après les autres, de sauvegarder, de regarder le résultat et de faire le changement suivant, etc. Ça vous aidera à bien comprendre le cheminement, les classes et l’évolution de votre menu déroulant.

Commençons par réduire la taille d’écriture du menu déroulant à 14px, puis rajouter une bordure noire sous les liens et établir la largeur des liens a 100%.

#top-menu .sub-menu li a {
font-size: 14px; border-bottom: 1px solid black; width: 100%;
}

On règle la largeur de la liste et enlève les marges internes par défaut.

#top-menu .sub-menu li {
padding-left: 0px; padding-right: 0px; width: 100%;
}

Idem pour les marges internes du sous-menu (conteneur).

#top-menu .sub-menu {
padding-top: 0px; padding-bottom: 0px;
}

Et on finit avec les sous sous-menus.

#top-menu li li a {
padding-top: 10px; padding-bottom: 8px;
}

On peut aussi rajouter un effet lorsqu’on survole un lien du menu déroulant avec la souris (hover)
Faisons un rouge bien voyant pour que la différence soit nette.

.nav ul li a:hover {
opacity: 1; background-color: red;
}

ajuster les dimensions du menu déroulant dans Divi

Agrandir le menu déroulant de DIVI

Ne nous arrêtons pas là et voyons comment agrandir notre menu déroulant.

Largeur du menu déroulant.

.nav li ul {
width: 310px !important;
}

Alignement gauche du sous sous-menu (doit être identique à la largeur du menu déroulant) et alignement de la hauteur du sous sous-menu avec le sous-menu (top : 0px ;).

.nav li li ul {
left: 310px !important; top: 0px;
}

Largeur des liens.

#top-menu li li a {
width: 280px;
}

ajuster les dimensions du menu déroulant dans Divi

En partant de ce code, vous n’avez plus qu’à changer les valeurs des dimensions pour affiner votre menu selon le design que souhaitez.

1 commentaire
  1. Bonjour. Merci pour ce tuto. J’ai essayé d’insérer les différents codes CSS dans le CSS additionnel, mais je ne vois aucun changement dans l’affichage du menu déroulant. Pourrais-je vous envoyer une capture d’écran ? Merci d’avance. Bien à vous.

Laisser un commentaire

error: Contenu protégé - DMCA
globalwordpress
Logo