Current menu link in nevigation bar must stay high

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.

Answer 1

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