If you want to make a navbar sticky at a specific position, you need to use the CSS property "position: sticky". This works with certain positions where you want the navbar to stick. For example:
position: sticky;
top: 3rem;
To update your CSS code from:
.sticky {
position: fixed;
top: 0;
}
to
.sticky {
position: sticky;
top: 0;
}
For more information, you can refer to this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Make sure to specify the exact position where you want the bar to stick while scrolling. You can try the following code snippet:
<!DOCTYPE HTML>
<html>
<style>
.sticky{
position: sticky;
top: 0;
}
</style>
<header id="home1">
<nav id="navbar" class="sticky">
<div class="row flex">
<a href="#"><img src="img/logo.png" class="logo" alt="logo"></a>
<ul>
<li><a href="#home" class="active">home</a></li>
<li><a href="#service">service</a></li>
<li><a href="#team">team</a></li>
<li><a href="#skill">skill</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#review">review</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="hero-text-box">
<h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
<a href="#" class="btn btn-hero">work with us!</a>
</div>
</div>
</header>
</html>