web-dev-qa-db-fra.com

La barre de navigation collante ne colle pas

J'ai une barre NAV dans un header que j'essaie de faire sticky sur la page entière. J'ai regardé partout des solutions et j'ai essayé beaucoup de choses à résoudre mon problème (no overflow, supprimer le flexbox, définissez un height sur le parent, etc.) , mais sans vain malheureusement. Il y a juste quelque chose que je ne comprends pas. J'ai ajouté une classe de .sticky à mon h1, juste pour le tester, et cela fonctionne bien sûr.

J'ai inclus mon HTML et ma CSS dans un extrait. J'espère que tout le monde est clair pour tout le monde. Toute aide serait immensément appréciée!

Voici un lien vers la page: https://puzzi22.github.io/cambios-climatic/index.html

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 0 0 0;
  background-color: white;
  text-transform: uppercase;
  font-weight: 800;
  overflow-y: visible;
}

.header-flex {
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: auto;
}

.lema {
  font-weight: 400;
  order: -1;
  margin: 0;
}

.company-name {
  font-size: 3.8rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.nav-links {
  font-size: 1rem;
  padding-bottom: 1rem;
  line-height: 1.4;
}

.nav-links li {
  display: inline-block;
  margin-right: 3rem;
}


/* STICKY ELEMENT */

.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-start;
}


/* SOME CONTAINERS */

.container-desktop {
  width: 70%;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  gap: 10%;
  align-content: center;
}


/* SOME STYLING (that shouldn't affect anything) */

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

header a {
  color: orange;
}

header a:hover {
  color: rgba(0, 0, 0, 0.5);
}
<header>
  <div class="header-flex container-desktop">
    <span class="company-name">
      <a href="#">1,5 &#8451;</a>
    </span>
    <span class="lema">No hay planeta B</span>
    <nav class="sticky">
      <ul class="nav-links">
        <li>
          <a href="#">Síntomas</a>
        </li>
        <li>
          <a href="#">Videos</a>
        </li>
        <li>
          <a href="#">COP26</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<main class="container-desktop">
  <h1 class="sticky">Beginning of MAIN</h1>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
htmlcssnavbarsticky
2
Puzzi22

Est-ce ce que vous alliez? Je viens de mettre la classe collante sur l'élément d'en-tête.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 0 0 0;
  background-color: white;
  text-transform: uppercase;
  font-weight: 800;
  overflow-y: visible;
}

.header-flex {
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: auto;
}

.lema {
  font-weight: 400;
  order: -1;
  margin: 0;
}

.company-name {
  font-size: 3.8rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.nav-links {
  font-size: 1rem;
  padding-bottom: 1rem;
  line-height: 1.4;
}

.nav-links li {
  display: inline-block;
  margin-right: 3rem;
}


/* STICKY ELEMENT */

.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-start;
}


/* SOME CONTAINERS */

.container-desktop {
  width: 70%;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  gap: 10%;
  align-content: center;
}


/* SOME STYLING (that shouldn't affect anything) */

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

header a {
  color: orange;
}

header a:hover {
  color: rgba(0, 0, 0, 0.5);
}
<header class="sticky">
  <div class="header-flex container-desktop">
    <span class="company-name">
      <a href="#">1,5 &#8451;</a>
    </span>
    <span class="lema">No hay planeta B</span>
    <nav class="sticky">
      <ul class="nav-links">
        <li>
          <a href="#">Síntomas</a>
        </li>
        <li>
          <a href="#">Videos</a>
        </li>
        <li>
          <a href="#">COP26</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<main class="container-desktop">
  <h1>Beginning of MAIN</h1>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
0
Rob Moll