fbpx

Certains logos (ceux conçus au format vertical par exemple) deviennent totalement illisibles quand ils sont affichés en petit dans la navbar en version mobile.
Ou parfois on peut simplement avoir envie, pour des raisons graphiques, de simplifier son logo en n’affichant par exemple que le picto sur la version mobile de son site.
Voici donc quelques lignes de code CSS à insérer, soit dans Options du thème -> Personnaliser CSS, soit dans le fichier style.css de votre thème enfant.

@media only screen and (max-width: 980px) {

  #logo {
    content: url("ici-le-chemin-d-acces-a-votre-logo");
  }

  .et_header_style_left #logo {
    max-height: 80% !important;
  }

  .mobile_menu_bar:before {
    top: 15px !important;
  }

}

Examinons le code :

  • Ligne 4 : on précise l’URL du logo dédié à l’affichage sur mobiles
  • Ligne 8 : on ajuste la hauteur du logo (ce qui modifie hauteur de la navbar)
  • Ligne 12 : on ajuste la position du menu hamburger pour le centrer dans la hauteur de la navbar