Demande d'aide sur ajustement thème classic.

[pit3d]

Bonjour, je modifie le thème d'origine avec un thème enfant.

Je souhaite avoir la partie haute, le menu la connexion le bloc réassurance en fixe le reste "scrollable"

J'ai trouvé pour le fixer, je ne sais pas si c'est fait proprement d'ailleurs:

#header{
 position: fixed;
     width: 100%;
}

Par contre la page centrale se trouve chevauchée donc j'ai fait :

#wrapper {
     padding:11%;
 }

Mais c'est vraiment pas propre car d'un navigateur à l'autre c'est pas positionné pareil.

une idée pour faire ça proprement s'il vous plaît ?

Merci.

Cordialement.

[CinqEuros]

Bonjour,

Serait-il possible d'avoir un aperçu ou un lien pour pouvoir observer le comportement actuel ?

[pit3d]

oui voilà :

https://mes-bio-objets.fr

[CinqEuros]

De ce que je vois tu peux remplacer 

#header {
    position: fixed;
    width: 100%;
}

par

#header {
    position: sticky;
    top: 0px ;
    height: auto;
    width: 100%;
}

et supprimer ton padding de 11%, en tout cas pour la marge haute (donc remplacer par padding: 0 11% 11% 11%;).

Ca permet à ton header de rester dans le flow tout en gardant sa position au scroll.

Edited August 19, 2022 by CinqEuros (see edit history)

[pit3d]

super merci 

j'ai enlever le padding du coup.

Je me permets d'abuser encore de tes compétences.

Je cherche à avoir le fond du menu, qui descend sous bijoux fantaisie, de couleur à la place du blanc et tous se qui est fond blanc d'une autre couleurs

j'ai trouve mais ça change qu'autours du liens.

#header .top-menu a[data-depth="0"]:hover {
     color: #96c13e;
    }
 #header .top-menu a.dropdown-submenu {
    color: #96c13e;
    background: #fed700!important
    }
 #header .top-menu .sub-menu a:hover {
 color:  #000000;
 
     }

Je remet en place pour que tu comprenne.

 #96c13e c'est le vert et #fed700 c'est le jaune

[CinqEuros]

Si je peux t'aider, c'est avec plaisir 😄

Je ne suis pas sûr de bien comprendre ce que tu cherches à obtenir, pourrais-tu être plus précis ?

[pit3d]

je veux avoir le menu dans une autre couleur que le blanc voir la photo.

[CinqEuros]

Dans ce cas là je pense qu'il faudrait que tu ajoutes ta propriété background-color: #fed700;

background-color: #fed700;

Dans la section 

.top-menu .sub-menu {
    z-index: 18;
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
    margin-left: 0.9375rem;
    visibility: hidden;
    border: none;
    box-shadow: 2px 1px 11px 2px rgb(0 0 0 / 10%);
    opacity: 0;
    transition: opacity 0.5s ease,visibility 0.5s ease;
}

C'est la div portant la classe .sub-menu qu'il te faut modifier.

Comme ca pas besoin de rajouter la couleur de fond sur tes liens !

[pit3d]

parfait merci

maintenant les fond blanc s'il te plaît🤩

[CinqEuros]

Pour ce qui est de tes fonds blanc je te conseille de te service de l'inspecteur de ton navigateur afin d'identifier les blocs comportant la propriété

background-color: #fff;

Ce serait la méthode la plus simple.

[pit3d]

oui c'est se que je suis en train de faire !!

par contre je bute sur la petite bande blanche dans le haut entre le menu et le haut de page !

 

[CinqEuros]

Pour cette bande blanche c'est une bordure que tu peux retrouver dans cette section :

#header .header-nav {
    max-height: 50px;
    border-bottom: #f6f6f6 2px solid;
}

Il de suffit de supprimer ou commenter la ligne 

border-bottom: #f6f6f6 2px solid;

 

[pit3d]

encore bien vue 

merci tu m'as grandement fait gagner du temps.

Une dernière chose si je veux enlever le stiky pour les mobiles je fait comment ?

 

[CinqEuros]

Pour cela tu peux définir un breakpoint à partir d'une certaine largeur de page. Tu peux prendre une limtie classique comme 768px.

Dans ton CSS tu peux ajouter la section qui suit : 

@media (max-width: 768px) {
	#header {
    	position: unset;
	}
}

Comme ca, en dessous de 768px la propriété sticky n'est pas prise en compte !

[pit3d]

ben voilà.

C'est parfait encore une fois un grand merci.

[CinqEuros]

Pas de soucis, avec plaisir !

N'hésite pas à marquer ce post comme résolu 😉

[pit3d]

oui mais comment je fait ?