Affichez un logo différent sur la version mobile de votre site Divi - Divi Community

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 de son site Divi.
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.
Découvrons donc comment réaliser ce petit ajustement qui peut faire toute la différence.

Un soupçon de CSS pour modifier le logo

Je rassure ceux qui n’aiment pas trop mettre les mains dans le code : dans ce tuto, vous n’aurez besoin que d’un peu de CSS !

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.

Si vous voulez en savoir plus sur les diverses méthodes pour ajouter des CSS, je vous invite à lire mon article 7 manières d’ajouter des CSS à Divi.

Si vous n’avez pas de thème enfant, vous pouvez télécharger gratuitement celui de Divi Community.
De plus, si vous vous posez des questions sur les thèmes enfants, je vous invite à lire mon article “Tout savoir sur les thèmes enfants pour Divi”.

CSS

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

Assurer la compatibilité avec les divers navigateurs

La méthode présentée ci-dessus ne fonctionne malheureusement pas avec FireFox.

En complément des CSS données ci-dessus, vous devrez donc ajouter les lignes suivantes qui sont uniquement à destination de FireFox.

CSS

Examinons le code :

  • Ligne 1 : on s’adresse uniquement à FireFox ; ces règles CSS ne seront pas lues par les autres navigateurs
  • Ligne 5 : on masque le logo standard de Divi
  • Lignes 8 à 13 : on s’appuie sur l’élément existant logo_helper pour le styler de manière à lui ajouter le logo à destination des mobiles avec les propriétés adéquates :
    • contenu : on précise l’URL du logo dédié à l’affichage sur mobiles
    • largeur : on laisse sur auto
    • hauteur maxi : à ajuster en fonction du logo
    • position par rapport au haut du conteneur : à ajuster en fonction du logo
    • position : on laisse sur absolute

Le mot de la fin

Et voila, après avoir ajouté cette vingtaine de lignes de CSS, vous avez désormais sur la version mobile de votre site Divi un logo différent de la version desktop.
Ce qui améliorera la lisibilité de votre logo sur mobiles et apportera une touche plus professionnelle à votre site Divi en montrant que vous prenez soin d’ajuster les petits détails.