Ajustements du menu Divi

18 Sep 2017

Hello tout le monde !

Aujourd’hui, un peu de style dans le menu Divi, qui de base a vraiment un look Fischer-Price à mon humble avis.

Version desktop

Explications

  • Fonte plus fine (100 à 300 selon la police…!)
  • Suppression du padding des sous-menus et éléments de sous-menus
  • Largeur et padding des liens des sous-menus pour l’harmonie 😉
  • Ajout d’une discrète ligne de séparation entre les liens (jouer sur l’opacité en fonction de la couleur de fond)
  • Taille de police à définir aussi, un chouïa plus petite que le menu principal, et légère séparation (facultative) entre les liens
  • Ajustement de la position verticale des sous-menus pour les aligner au nouveau design
    Idem pour l’indicateur de sous-menu (la petite flèche vers le bas)

Code CSS desktop

@media only screen and (min-width: 981px) {
#top-menu li a { font-weight: 300; }
#top-menu li ul, #top-menu li li { padding: 0; }
#top-menu li ul, #top-menu li li a { width: 280px; }
#top-menu li li a {
  padding: 10px 20px; font-size: 0.8em;
  border-bottom: 1px solid rgba(255,255,255,0.1); }
#top-menu li ul li ul { top: -3px; }
#top-menu li .menu-item-has-children > a:first-child::after { top: 10px; }
}

Version mobile

Explications

  • Fonte plus fine
  • Ajustement du menu aux bords de l’écran : il faut magouiller car le menu est inclus dans un conteneur plus petit que l’écran !
  • Utilisation de la croix pour l’icône du menu quand il est ouvert (le ::before contient le code du caractère dans la fonte interne ETmodules)

Merci à Cory Jenkins de Divi Space pour ce hack du menu mobile.

Code CSS mobile

@media only screen and (max-width: 980px) {
#mobile_menu a { font-weight: 300; }
.container.et_menu_container { width: calc( 100% - 60px); }
.et_mobile_menu { margin-left: -30px; padding: 5%; width: calc( 100% + 60px); }
.mobile_nav.opened .mobile_menu_bar_toggle::before { content: "d"; }
}