I'm having trouble updating my add class. I'm attempting to create a sticky navigation bar, but the CSS on my site doesn't seem to be updating. None of the solutions I've found so far have been helpful. The website in question is antetech.org
HTML:
<nav id='main-nav'>
<a href="/index.php"><img class='logo' src='CSS/IMG/logo.png' alt='Logo'></a>
<ul>
<li><a href='#home'> <button class="bttn-stretch bttn-md bttn-primary">Home</button> </a> </li>
<li><a href='#about'><button class="bttn-stretch bttn-md bttn-primary"> About </button></a></li>
<li><a href='#downloads'> <button class="bttn-stretch bttn-md bttn-primary">Software</button> </a> </li>
<li><a href='/support.php'><button class="bttn-stretch bttn-md bttn-primary"> Tech Support </button></a></li>
</ul>
</nav>
CSS:
nav .onscroll {
background: rgba(173, 9, 26, 0.5);
}
JQuery/JavaScript:
<script type="text/javascript">
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('onscroll');
$('nav').removeClass('default');
}
else
{
$('nav').removeClass('onscroll');
$('nav').addClass('default');
}
})
</script>
In Chrome, the class appears to be updating, but no changes are being reflected. This issue extends beyond just the background color and applies to any modifications.