Navigation Bar not on top
Question
My navigation bar is not all the way up in my browser. Look at my code and the picture you will understand! https://ibb.co/YZZjRx8
There is a white "thing" over my navigation bar. I want the navigation bar in top!!
I deleted some <body> tags. I also deleted some other tags but nothing important!
My HTML-file
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="main.css" />
<ul class="topnav" style="position:sticky">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
My CSS-file
body {
margin: 0;
padding: 0;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: #111;
}
ul.topnav li a.active {
background-color: #4CAF50;
}
@media screen and (max-width: 600px) {
ul.topnav li {
float: none;
}
}
Where is my mistake? Look at the picture.
3 answers
solution1
0 2019-10-20 19:02:13
I think it will work if you add:
ul {
margin: 0;
padding: 0;
}
solution2
0 2019-10-20 19:04:41
body { margin: 0; background: gray; } header { position: sticky; top: 0; /* */ background: blue; color: white; }
<header> header </header>
https://jsfiddle.net/sheriffderek/t16zwo92/
Here's how you can create a minimal-reproducible-example
solution3
0 2019-10-20 19:10:43
I have solved your question and saved in this file. Please check. It's just margin 0 for the ul tag.
https://www.w3schools.com/code/tryit.asp?filename=G960GIC7YCC3
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.