Menu problem - cannot get both links and highlights to work

Beginners
1

Based on the Pinegrow blog template, I have a master page with this menu (here abbreviated)

<nav class="bg-white navbar navbar-expand-md navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                        <div class="navbar-center navbar-nav">
                            <ul class="navbar-nav  ">
                                <li class="nav-item active">
                                    <a class="nav-link" href="home.html" data-pgc-field="menuItems">Home </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="history.html" data-pgc-field="menuItems">History</a>
                                </li>
                               
                            </ul>
                        </div>
                    </div>
                </nav>

then at the end of the html

<script> 
         $(document).ready(function() {
             "use strict";
             $('ul.navbar-nav > li').click(function(e) {
               //e.preventDefault();
               $('ul.navbar-nav > li').removeClass('active');
               $(this).addClass('active');
             });
           });
        </script>                                                                                                                                                                                                                                                                                                                                                                         -->
    </body>
</html>

When the page is served, the links when clicked refresh to the correct new page, but the highlighted menu item does not change.

If I remove the comment from e.preventDefault(), the menu highlights function, but the browser remains pointed at the same page.

Would appreciate help seeing where I am going wrong, to get both links and highlights working as expected…

2

Hi @davidxtaylor,
So, I think I understand your problem/question. I’m assuming this is a static HTML site. This means that when the link is clicked a completely new page is loaded including the navigation. Your script is setting up an event listener on page “A”. When the user clicks a menu item all of the ‘active’ classes are removed from the navigation on page “A”, a class of active is added to the clicked item on page “A”, and finally, the browser navigates to the new page, “B”. Make sense? So, your script is sort of working to modify page “A”, but by then the browser is pointing to page “B”., so the script is just not providing the desired outcome. If this is indeed a static set of pages you don’t need any scripting to do this. Simply add the active class to the code of each page on the correct menu item.
Let me know if this helps or if I made some incorrect assumptions.
Cheers,
Bob

3

Hi and many thanks, that indeed helps.

You are right, its a static html site. Following your comment, I removed the script and added the active class as appropriate to the nav-item on each page and it gives the desired result.

I had inappropriately taken a blog template, designed for use on a single page, and adapted it for a multi-page site. The script was needed when jumping to different regions on a single page and highlighting in the menu, but was not required for my need, as you kindly pointed out.

I thought I was OK then, but as soon as I changed the master page and then updated the child pages, the manually added active class was removed.

This (for the benefit of any others) was another mistake in following one of the videos. When in the GUI I had selected the menu items on the master page and made the region editable, Pinegrow had made the < a > tag into the data-pgc-edit region, rather than the < li > list item, which was the way I did it later by manually altering the code.

This was all I needed

<li class="nav-item" data-pgc-edit="menuItems1" data-pgc-edit-classes="active">
<a class="nav-link " href="home.html">Home </a>
</li>

Thanks again for your help
David

.

1 Like