Bonjour à tous !
Me revoilà avec un problème que j’ai depuis le début, il s’agit de mon menu.
J’ai fait une fonction JS afin que lorsqu’on scroll, le menu reste en haut de ma page et visible.
Le problème est que mon menu de base est centré sur la page avec margin : 0 auto; et des que la fonction JS applique mon autre class la position : fixed m’installe mon menu a gauche, le margin : 0 auto; n’étant pas pris en compte.
Voici mon bout de code :
<ul class="menu cf">
<li><a class="btn" href="index.php"><img class="home" src="img/logo.png"></a></li>
<li><a class="btn" href="solutions_dce.php">Solutions DCE</a></li>
<li><a class="btn" href="achat_revente.php">Achat / Revente</a></li>
<li><a class="btn" href="pack_opening.php">Pack Opening</a></li>
<li><a class="btn" href="review.php">Review</a></li>
<li><a class="btn" href="themes_draft.php">Draft à thèmes</a></li>
<li><a class="btn" href="note_equipes_abos.php">Je note vos équipes</a></li>
<li><a class="btn" href="resume_futchampions.php">Résumé Fut Champions</a></li>
<li><a class="btn" href="calendrier_fut_septembre.php"><i class="far fa-calendar-alt" title="Calendrier Fut"></i></a></li>
<li><a class="btn" href="fifa21.php">Fifa 21</a></li>
</ul>
voici mon script J§ :
$(function(){
// On recupere la position du bloc par rapport au haut du site
var position_top_raccourci = $(".menu").offset().top;
//Au scroll dans la fenetre on déclenche la fonction
$(window).scroll(function () {
//si on a defile de plus de 150px du haut vers le bas
if ($(this).scrollTop() > position_top_raccourci) {
//on ajoute la classe "fixNavigation" a <div id="navigation">
$('.menu').addClass("fixNavigation");
} else {
//sinon on retire la classe "fixNavigation" a <div id="navigation">
$('.menu').removeClass("fixNavigation");
}
});
});
et enfin voici mon code css :
.menu{
margin: 0 auto;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
padding: 15% 0 0 0;
}
.menu > li {
float: left;
position: relative;
}
.menu a {
display: inline-block;
color: #C50101;
text-transform: uppercase;
text-decoration: none ;
font-family: 'bolsterbold', cursive;
font-size: 1vw;
border: 1px solid rgba(65, 63, 63, 0.61);
border-radius: 5px;
background: rgba(255, 255, 255, 0.767);
margin-right: 1px;
vertical-align: sub;
}
.menu a:hover{
color:#0566ab;
}
.menu > li > a {
padding: 5px 10px;
}
.fixNavigation{
z-index: 9999;
position:fixed;
padding: 0;
transform-origin: 50% 50%;
/* Mise en forme */
}
.fixNavigation a{
background: rgba(255, 255, 255);
}
Je ne comprends pas, donc je le centre avec un left : 10% mais en fonction de l’écran cela fait très moche.
En espérant que vous pourrez m’aider.
Merci d’avance.
+0
-0
