Récemment sur le groupe facebook Support Divi Community, quelqu’un se demandait comment faire dépasser le logo du menu pour arriver à ce genre de chose:

logo chevauche menu divi

 

Et comme cela peut servir à pas mal d’entre vous (et que c’est très facile) pour personnaliser un peu vos sites, voici la solution.

Il vous suffit d’ajouter ces quelques lignes de CSS dans Apparence->Personnaliser->CSS additionnels ou dans le fichier style.css de votre thème enfant :

/*FAIRE DEPASSER LE LOGO DU MENU DE DIVI*/

/*Taille du logo sur tablette et téléphone*/
@media only screen and (max-width: 980px) {
#logo {
min-height: 150px;
}
}

/*Taille du logo sur grand écran*/
@media only screen and (min-width: 981px) {
#logo {
min-height: 200px;
}
}

Et voila. Il suffit simplement de cibler le logo grâce à son identifiant et de lui appliquer une taille minimum. On définit la propriété deux fois en utilisant les médias queries CSS pour affiner sa taille suivant les écrans.

Au fait, on utilise la limite de 980px car c’est à ce moment-la que le menu passe en affichage tablette/smartphone.

À vous maintenant d’adapter les différentes tailles en pixel dans le code CSS pour afficher votre logo comme vous le voulez. N’oubliez pas de vérifier sa taille également sur téléphone 😉

D'autres tutoriels pouvant vous intéresser: