Hi there, I'm currently working on an off canvas menu and I'm trying to figure out how to add a class that will highlight the active menu item. However, the jquery code I have doesn't seem to be doing the trick. I've scoured the web for solutions but nothing seems to work. Any suggestions or ideas would be greatly appreciated!
<nav class="site-menu">
<div class="menu-list">
<ul>
<li><a href="portfolio.php">portfolio</a></li>
<li><a href="projects.php">projects</a></li>
<li><a href="process.php">process</a></li>
<li><a href="blog.php">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</div>
</nav>
css
.site-menu ul {
list-style: none;
padding: 20px;
margin: 0;
}
.site-menu ul li a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
color: #7f7f7f;
background: transparent;
text-decoration:none;
}
.menu-list{
position: absolute;
top: 80px;
margin-left: 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
}
.active {
color:#fff;
}
script
var selector = ".site-menu li";
$(selector).click(function(){
$(selector).removeClass('active');
$(this).addClass('active');
});