Je veux que la barre de navigation reste en haut une fois que je fais défiler dessus, mais cela ne fonctionne pas et je n'ai aucune idée de pourquoi. Si vous pouvez aider, voici mon code HTML et CSS:
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato",sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover{
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
<nav style="position: sticky; position: -webkit-sticky;">
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
position: sticky
peut cesser de fonctionner s'il est à l'intérieur d'une flexbox à moins que vous ne soyez prudent et échouera également s'il y a un overflow: hidden
ou overflow: auto
entre et tout ce qu'il défile à l'intérieur (racine du corps ou ancêtre le plus proche avec débordement: scroll)
overflow: hidden
et overflow: auto
! Je me gratte la tête depuis des jours en essayant de faire fonctionner cette merde