Menu fixe avec scroll

Par Pauline Bonnet, il y a 8 ans


Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

<header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><h1><img src="images/minilogo.png" alt="logo Pauline Bonnet"></h1></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#accueil">ACCUEIL<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#cv">CV</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#monblog">MON BLOG</a> </li> <li class="nav-item"> <a class="nav-link" href="#portfolio">PORTFOLIO</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">CONTACT</a> </li> </ul> <li class="nav-item active"> <ul> <li><a href="facebook.com" title="facebook"><img src="images/facebook.png" alt="lien vers Facebook"/></a></li> <li><a href="twitter.com" title="twitter"><img src="images/twitter.png" alt="lien vers Twitter"/></a></li> <li><a href="instagram.com" title="instagram"><img src="images/instagram.png" alt="lien vers Instagram"/></a></li> <li><a href="linkedin.com" title="linkedin"><img src="images/linkedin.png" alt="lien vers Linkedin"/></a></li> </ul> </li> </div> </nav> </header> header{ background-color : white; padding-BOTTOM: 2em; height: 4.8em; align-items: center; list-style-type: none; } header h1 img { width: 90px; } header ul:nth-of-type(1) { justify-content: center; display: flex; flex:12; text-align: center; align-items: center; padding: 0; margin: 0; font-family: "quicksand"; } header ul:nth-of-type(1) li{ list-style-type: none; margin: 3px; } header ul:nth-of-type(2) li{ margin-right: 15px; align-items: center; list-style-type: none; }

J'aimerais savoir comment faire un menu fixe lorsque'on scroll ??

3 réponses

keulu, il y a 8 ans

tu peux rajouter un position: fixed;

Pauline Bonnet Pro, il y a 8 ans

Quand je rajoute le position:fixed;

mon menu se rétréci et passe "en dessous" des éléments de mon site :/

keulu, il y a 8 ans

rajoute un z-index: 9999; pour ce qui est de passer en dessous.