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”.
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.
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.
bonsoir, je ne comprends pas pourquoi ça ne fonctionne pas pour moi alors que j’ai bien copié le chemin de mon image dans sa totalité…Il ne se passe rien ! c’est pourtant simple à mettre en place!…
Difficile à dire à l’aveugle mais as-tu bien vérifié l’url de ton image ? Les guillemets sont-ils bien présents ? As-tu vidé tes caches (navigateur et plugin de cache s’il y a) ?…
Bonjour 🙂
Le logo ne s’affiche pas non plus sur smartphone O_o
Mais il n’apparaissait déjà pas avant !?
Voici le site: http://www.terreetsource.be
et les lignes de code introduites :
(Il y a 2 lignes de code qui précèdent, précisant la couleur du hamburger)
Déjà merci ^_^
Isabelle
—
span.mobile_menu_bar:before {
color: white !important;
}
@media only screen and (max-width: 980px) {
#logo {
content: url(“https://terreetsource.be/wp-content/uploads/2020/05/logo_terreetsourceBLANC.png”);
}
.et_header_style_left #logo {
max-height: 80% !important;
}
.mobile_menu_bar:before {
top: 15px !important;
}
}
@-moz-document url-prefix() {
@media only screen and (max-width: 980px) {
#logo {
display: none;
}
.logo_helper {
content: url(“https://terreetsource.be/wp-content/uploads/2020/05/logo_terreetsourceBLANC.png”);
width: auto!important;
max-height: 80%!important;
top: 5px!important;
position: absolute!important;
}
}
}
Essaye en ajoutant ces règles :
.et_hide_mobile_logo #main-header .logo_container {
display: block!important;
opacity: 1!important;
}
}