28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je travaille sur un site WordPress avec le thème Avada. Ce thème prévoit la possibilité d'avoir un logo pour un header classique et un logo pour le sticky header. La graphiste qui a fait le design a prévu le même logo (un petit) sur les pages de contenu et en sticky mais un logo différent pour la home (un grand) quand on n'est pas en sticky.
Vu que le cas le plus fréquent est le petit logo, je l'ai mis dans le thème pour le header classique et le sticky. J'ai trouvé ce morceau de code pour remplacer le logo uniquement sur la home (en changeant le page id bien sûr)

.page-id-215 .fusion-logo a img
{
display: none !important;
}
.page-id-215 .fusion-logo a
{
background: #fff url('http://whateveryourfilepathis') top left no-repeat !important;
display: block !important;
height: 80px !important;
width: 300px !important;
margin-top: -20px !important;
margin-bottom: -20px !important;
}


Résultat, j'ai bien un logo différent sur la home mais :
- l'effet sticky a disparu Smiley decu je voudrais le remettre.
- le background opaque est trop haut, je voudrais le garder uniquement derrière la navigation, avec juste le logo qui dépasse en hauteur.
Pouvez-vous m'aider à dépatouiller ce sujet ? Voici l'URL du site : https://lirenlaque.com/

Merci bcp et bonne journée !
Marine
Modérateur
Salut,

Ce que je ne comprend pas c'est pouquoi ton header est fixé à 217px direct dans le html ? Tu as un code Js qui calcule la hauteur du header ?

Sinon après pour qu’il dépasse tu peux juste le positionner en absolute (top et left à 0)