Question

On navigation bar once i clicked on any menu like (Home), home link is active but doesn't stay highlighted.

Unable to find the solution.

Was it helpful?

Solution

You need to dynamically add active class to menu item and add suitable style to it. HTML

<ul id="navi">
    <li><a class="menu" href="#">About MHG</a></li>
    <li><a class="menu" href="#">Workout Programs</a></li>
    <li><a class="menu" href="#">Fitness Tips</a></li>
    <li><a class="menu" href="#">Contact Us</a></li>          
    <li><a class="menu" href="#">Read Our Blog</a></li>
  </ul>

jquery

$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

JSFIDDLE

Reference - Jquery Add active class to main menu

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top