position:sticky qui ne marche plus dans le <header

18 juin 2021 à 20:10:03

Bonsoir à tous.

J'ai un petit problème, j'ai fait une barre de navigation sensée être sticky. Cela fonctionnait parfaitement jusqu'ici, seulement depuis peu j'ai décidé de mettre cette barre dans ma balise <header> qui contient le logo du site et donc ma barre de navigation juste en dessous car cela me semble plus logique au niveau sémantique, que de la mettre en dehors.
Seulement depuis que j'ai fait ça, ça ne marche plus.
Alors j'imagine que c'est dû à une propriété par défaut du header, qui entre en conflit avec le positionnement de ma navbar devenue son enfant. Mais est-ce que quelqu'un pourrait m'expliquer s'il vous plait, laquelle, et pourquoi?

Voici mon code:

côté HTML:

<header id= "marque">
  <img id="logoTop" src="img/logoTop.png" alt="Mon Site">
  <nav id="navbar">
    <ul id="menuliste">
      <li class= "boutonMenu"><a href="index.php"id=<?=$activeA; ?>>Accueil</a></li>
      <li class= "boutonMenu"><a href="Femme.php"id=<?=$activeF; ?>>Femme</a></li>
      <li class= "boutonMenu"><a href="Homme.php"id=<?=$activeH; ?>>Homme</a></li>
      <li class= "boutonMenu"><a href="Mixte.php"id=<?=$activeM; ?>>Mixte</a></li>
      <li class= "boutonMenu"><a href=<?=$lienConnexion?> id=<?=$activeC?>><i id='logoUser'class='fas fa-user'></i><?=$nomBouton?></a></li>
      <li class= "boutonMenu"><i class='fas fa-search'></i></li>
      <li class= "boutonMenu"><a href="panier.php"id=<?=$activeP; ?>><i id="logoPanier"class='fas fa-shopping-bag'style="font-size: 1.4em"id=<?=$activeP?>></i><?=$nbArticles?></a></li>
    </ul>
  </nav>
</header>

Côté CSS:

/* STYLES DES ELEMENTS DE L'ENTETE */
#marque{
    background: rgb(29, 29, 27);
    text-align: center;
}

#logoTop{
    height: 140px;
}

#navbar{
    position: sticky;
    position: -webkit-sticky;
    top:0;
    background-color: #2d2a18;
    z-index: 1;
}

#menuliste{
    list-style-type: none;
    width: auto;
    margin: 0;
    padding: 0 22px;
    top: 0;
    left: 0;
    right: 0;
    background-color: #1b1b1b;
    display: flex;
    justify-content: space-between;
    align-items: center;

-
Edité par ValerioFluo 18 juin 2021 à 20:19:14

Lamecarlate

18 juin 2021 à 20:42:04

Bonjour,

je suis déjà tombée sur ce que tu décris, et à ma connaissance il n'y a pas d'autre solution que de sortir du menu du header. En effet, position: sticky prend comme référence le parent - tout court.

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)

(source : https://developer.mozilla.org/en-US/docs/Web/CSS/position )

J'avoue, c'est relou, j'aurais bien aimé que ça soit le plus proche parent positionné, comme absolute, mais les specs sont les specs.

Pas d'aide concernant le code par MP, le forum est là pour ça :)