I'm trying to let the navbar fixed so that when I scroll the navbar remains fixed. But actually, when I'm scrolling the navbar goes up and don't remain fixed. Please help me in this issue. I'm sharing my source codes what I'm trying.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
margin: 1rem;
}
ul {
position: fixed;
width: 100vw;
padding-top: 5px;
list-style-type: none;
background-color: #333333;
height: 40px;
}
li {
display: block;
float: left;
font-size: 1.25rem;
}
a {
text-decoration: none;
color: white;
padding: 12px;
}
a:hover:not(.home) {
background-color: #111111;
}
.home {
background-color: #04aa6d;
}
main {
position: absolute;
top: 40px;
background-color: #1abc9c;
width: 100vw;
}<body>
<header>
<ul>
<li><a class="home" href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</header>
<main>
<h1>Fixed Top Navigation Bar</h1>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
</main>
</body>Here is the code. Now please let me know how to be fixed the header/navbar content so that when I scroll the header/navbar will remain fixed. Note: I'm just starting my HTML and CSS, so I may mistake a lot. Please give me proper explanation so that I can learn from your answer. Thanks Abdul Alim
actually your code is correct but because this navbar is covered by an existing element that's why this navbar is behind the element body
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
margin: 1rem;
}
ul {
position: fixed;
width: 100vw;
padding-top: 5px;
list-style-type: none;
background-color: #333333;
height: 40px;
z-index: 99; /* you can add z-index dinavbar */
}
li {
display: block;
float: left;
font-size: 1.25rem;
}
a {
text-decoration: none;
color: white;
padding: 12px;
}
a:hover:not(.home) {
background-color: #111111;
}
.home {
background-color: #04aa6d;
}
main {
position: absolute;
top: 40px;
background-color: #1abc9c;
width: 100vw;
}<body>
<header>
<ul>
<li><a class="home" href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</header>
<main>
<h1>Fixed Top Navigation Bar</h1>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
<p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
</main>
</body>