I have been searching for a solution to make my Navbar stick to the top of the page when scrolling down, but I haven't been able to find one that fits my specific needs. The challenge lies in the fact that my Navbar is currently positioned using flex and is not fixed at the top of the page.
If you have any suggestions or solutions, please take a look at my CODEPEN example.
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}<header id="logo2">
<a href="index.html"><img src="logo.png" alt="Logo"/></a>
</header>
<nav>
<ul id="navigation" class="menu2">
<li><a href="index.html">HOME</a></li>
<li class="active"><a href="gallery.html">GALLERY</a></li>
<li><a href="art.html">ART</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</body>