Gavin Reynoldson Gavin Reynoldson - 1 month ago 11
CSS Question

How to keep nav menu highlighted after click using js in sidebar

I have created a nav menu in Wordpress and placed it in sidebar.php in my child theme.

My nav menu is in the correct location and functions and looks as it should with the exception of the JS, which I have tried to get right but seem to be failing.

Each menu item takes you to a different page. I want the menu item to stay highlighted to show which page you are on once you have linked to that page. I have used CSS to highlight the li using :hover.

I cant work out how or where to place the js to keep it the menu highlighted.


  1. Is my JS correct?

  2. Where do I place it? directly in sidebar.php under the html? or somewhere else?



Thank you!



$('.main-nav-list').on('click', function () {
$('li.active').removeClass('active');
$(this).addClass('active');

});

.main-nav .main-nav-list li:hover {
background-color: #323840;
width: 150px;
border-radius: 20px;
}

.main-nav .main-nav-list li:active {
background-color: #323840;
}

<div class="sidebar sidebar-main <?php echo $sidebar_classes; ?>">
<div class="inner-content widgets-container">
<?php generated_dynamic_sidebar($sidebar_name);?>
<div class="nav nav-pills nav-stacked main-nav">
<div class="main-nav-holder">
<ul class="main-nav-list">
<li class="active">
<a id="sidebar-questions" href="/dwqa-questions">QUESTIONS</a>
</li>
<li class="">
<a id="sidebar-ask" href="/dwqa-ask-question">ASK A QUESTION</a>
</li>
<li class="">
<a id="sidebar-ama" href="/ask-me-anything">AMAs</a>
</li>
<li class="">
<a id="sidebar-jobs" href="/jobs">JOBS</a>
</li>
<li class=“">
<a id="sidebar-find" href="/find-a-health-professional">FIND A HEALTH PRO</a>
</li>
</ul>
</li>




Answer

I assume that you don't use any router to remain on the same page. If so, then once a user clicks on any link, a browser will load completely new page and so this code of yours

$('.main-nav-list').on('click', function () {
    $('li.active').removeClass('active');
    $(this).addClass('active');

});

has no effect, because it modified the previous page that is now replaced by the new page. The one thing I think you can do on page load is to read pathname and highlight a corresponding link. Here is an example of how this can be done

<script>
    jQuery(function () {
        var pathname = document.location.pathname;
        console.log('the pathname is: ', pathname);

        jQuery('.main-nav-list a').each(function () {
            var value = jQuery(this).attr('href');
            if (pathname.indexOf(value) > -1) {
                jQuery(this).closest('li').addClass('active');
                return false;
            }
        })
    });
</script>

And remove active class from all li elements in html.

I used jQuery instead of $ because of this:

"When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.

What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead. "

Comments