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.

Voici à quoi ressemble notre menu avant les modifications.

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.

Je vais commencer 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%; }

Ici, je 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 je finis avec les sous sous-menus.

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

Et si on rajoutait un effet lorsqu’on survole un lien du menu déroulant avec la souris (hover) ?
Allez on va faire un rouge bien voyant pour que la différence soit nette.

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

Le résultat me semble plus propre mais c’est à vous maintenant d’ajuster selon votre convenance.

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

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

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *