I've been working on some code to create a sticky navbar that remains fixed as I scroll down, but unfortunately, it's not working. I suspect the issue might lie in the CSS, as the HTML and javascript seem fine. Interestingly, this same code has worked successfully on other websites of mine, so I'm puzzled why it's not functioning properly here.
<div id="main-nav">
<nav>
<h2 id="logo" class="main-nav">Captain Max from ERA</h2>
<br>
<ul class="main-nav">
<li> <a href="#">Listings</a></li>
<li> <a href="#">Get in touch</a></li>
<li> <a href="#">Projects</a></li>
</ul>
</nav>
</div>
The script I'm using can be found below. I've reviewed it thoroughly but can't pinpoint any errors at this time.
<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
</script>
Here is the CSS code associated with the navbar. It appears that a property setting could be affecting the functionality of the sticky feature.
.sticky {
position: fixed;
top: 0;
width: 100%
}
.sticky + .content {
padding-top: 60px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
nav {
background-color: #7b8195;
color: #e9e6df;
overflow: hidden;
}
#logo {
font-family: 'Raleway', sans-serif;
font-size: 250%;
border-top: 10px;
padding-right: 150px;
padding-left: 10px;
padding-top: 10px;
}
nav li {
display:inline-block;
margin-left: 40px;
}
.main-nav {
float: left;
list-style: none;
margin-right: 60px;
border-bottom: 10px;
padding-bottom: 10px;
}
.main-nav li a {
float: right;
color: #e9e6df;
text-decoration: none;
font-size: 90%;
}
.main-nav li a:link,
.main-nav li a:visited{
padding-bottom: 8px;
color: #e9e6df;
text-decoration: none;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active{
border-bottom: 2px solid #e9e6df;
}
You can visit the website by clicking here.