Ajustements du menu Divi

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: "\4d"; }
}