Navigation bar that stays on top
Question
I need my navbar to stay on top of the page, but whenever that happens theres a enourmes gap between the top of the page and the nav bar need some help. Thank you in advance HTML kills me. I already tried to run a js file it stays the same way do you guys can think of any way it can work ? I know you can for sure. Once again thanks in advance.
/*Fonte Customuzida dos Simpsons*/ @font-face{ font-family: 'TheSimpsons'; src:url('font/SimpsonsFont.otf'); } /*Estilo da pagina "HOME"*/ body{ margin: 0; background-color: grey; } /*Estilo do 'titulo'*/ .titulo{ top: 0; position: absolute; background-color: yellow; display: inline-block; position: relative; margin: 0; width: 100%; background-image: url(img/clouds.jpg); text-align: center; background-size: 40%; } .titulo h1{ font-family: TheSimpsons; color:yellow; text-shadow: 2px 2px black; } /*Estilo da navBar*/ .navbar{ position: fixed; width: 100%; background-color: yellow; border-bottom: solid 2px black; } .navbar ul{ list-style-type: none; margin: 0; padding: 0.5%; position: center; font-family: TheSimpsons; font-size: 18px; text-align: center; } .navbar li{ display: inline; padding:2px 20px 2px 20px; } .navbar a{ color: black; text-decoration: none; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> <title>The Simpsons</title> </head> <body> <div class="titulo"> <h1>The Simpsons</h1> </div> <div class="navbar"> <ul> <li><a href="#">Sobre</a></li> <li><a href="#">Locais</a></li> <li><a href="#">Personagens</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Filmes</a></li> </ul> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2019-01-11 04:58:29
It's Simple,
Just replace your navbar class in CSS with this.
.navbar{
position: sticky;
top:0;
width: 100%;
background-color: yellow;
border-bottom: solid 2px black;
}
The problem was you have given position:fixed , That will fix the navbar exactly where it is, That's whythere was a gap on the top when you scroll.
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.