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:
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 :
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 😉
Super ce petit tuto Merci !
Bonjour,
Je suis une parfaite débutante en CSS, et je me demandais s’il fallait copier/coller les 15 lignes du code proposé.
Merci ! 🙂
Bonjour. Oui il fait tout copier mais n’hesites pas à adapter la taille des pixels pour avoir le rendu que tu veux 😉
Bonjour et merci pour ce tuto,
je suis débutant, j’ai bien coller le css où il faut mais si je choisi de mettre le logo au centre ( apparence/personnaliser/entête de navigation/format de l’entête/ ) le menu chevauche le logo ( le logo est en arrière plan). comment faire pour que le menu ne chevauche pas mon logo?
merci d’avance
Bonjour Léo. Essaye de rajouter au CSS les propriétés margin-right: 15px; margin-left: 15px pour définir des marges plus importantes. Tu peux augmenter le nombre de pixels pour voir ce qui est le mieux.
Tiens moi au courant.
Bonjour, merci pour le tuto, une question : comment faire que le logo se réduise quand on scrolle, comme le reste du menu qui se réduit ? Merci !
#main-header {
position: relative;
z-index: 99999;
top: 0;
width: 100%;
background-color: #fff;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 0 rgb(231, 172, 110);
font-weight: 500;
line-height: 23px;
}
@media only screen and (max-width: 980px) {
#logo {
min-height: 100px;
z-index: 100000;
}
}
/*Taille du logo sur grand écran*/
@media only screen and (min-width: 981px) {
#logo {
min-height: 100px;
}
}
😉
Bonjour,
J’ai le même soucis que Léo. Suivant l’écran, mon menu chevauche le logo.
Comment procéder ?
Merci
Bonjour, dans ce cas tu peux modifier le point de rupture du menu en suivant ce tuto, ça devrait régler ton soucis: https://www.divi-community.fr/tutoriels-divi/modifier-point-rupture-menu-mobile-divi/
Bonjour en fait j’ai le même souci avec le logo qui vient dessous le menu du coté droit. J’ai tenté de changer le point de rupture mais c’est pareil..
Hello, tu as essayé le code en commentaire juste au-dessus donné par Vincent?
Bonjour Super tuto merci 🙂
J’ai appliqué ça sur le site https://www.arts-allobroges.fr et ça marche nickel !
Malheureusement, la Search Console me sort une erreur (non mobile friendly) car voit toujours l’image du logo comme si elle était en grande taille, donc plus large que l’écran mobile. Et là, je sèche…
Salut Claire, tu es sur que la taille de base de ton logo est adaptée?
Bonjour, super tuto, j’ai coller le code de Vincent cela fonctionne par contre pouvez-vous me dire comment décaler mon logo du haut et mette le fond en transparence ?
Je suis débutant
Je vous remercie d’avance et vous souhaite une bonne journée.
Bonjour, pour décaler le logo du haut, tu as tout dans le tuto. Concernant la transparence, ça dépend de ton image d’origine, il te faut un png avec fond transparent 😉
Bonjour et merci pour la réponse, je me suis mal exprimé je parlais de transparence dans le bandeau du menu.(le header ? ).
Merci et belle journée