Remove "current-menu-item" class from non-active items in nav when on the same page as the href anchors

user_14284183 0
Viewed 740

I have a menu on my Betheme WordPress site: https://cth.magnet.dev/manitoba/

<div class="menu_wrapper">
    <nav id="menu">
        <ul id="menu-primary-menu" class="menu menu-main">
            <li id="menu-item-91"
                class="explore menu-item menu-item-type-custom menu-item-object-custom current-menu-item"><a
                    href="/manitoba/#explore"><span>Explore Trades</span></a></li>
            <li id="menu-item-92"
                class="build menu-item menu-item-type-custom menu-item-object-custom current-menu-item last"><a
                    href="/manitoba/#build"><span>Build Skills</span></a></li>
            <li id="menu-item-93"
                class="connect menu-item menu-item-type-custom menu-item-object-custom current-menu-item last"><a
                    href="/manitoba/#connect"><span>Connect</span></a></li>
        </ul>
    </nav><a class="responsive-menu-toggle " href="#"><i class="icon-menu-fine"></i></a>
</div>

The menu works perfectly fine on any page except for when I'm actually on the Manitoba page. As you can see in the classes for each list item, they all have the current-menu-item class, which I'm assuming because those anchor tags are all available on that page.

This causes an issue with some of the CSS we use, which underlines the currently active menu item. Specifically, it would be these items below:

    #Top_bar .menu > li.current-menu-item > a:after,
    #Top_bar .menu > li.current_page_ancestor > a:after,
    #Top_bar .menu > li.hover > a:after{opacity:1}

Because they all acquire the current-menu-item class, they all are underlined at all times while on that page.

Is there a way I can use JS to remove the class from those items that are not active? I found this article that seems to describe exactly my problem, but the code doesn't work for my situation. I'm assuming it's because the JS in this article is developed specifically for the Divi theme, where as I am on Betheme. I'm still a beginner dev, but the code doesn't look too specific to any one theme, so at the very least, is it possible to refactor this code to achieve the same goal?

<script>
(function ($) {
    $(document).ready(function () {
        var menu_items_links = $(".nav li a");
        menu_items_links.each(function () {
            if ($(this).is('[href*="#"]')) {
                $(this).parent().removeClass('current-menu-item current-menu-ancestor');
                $(this).click(function () {
                    var current_index = $(this).parent().index(),
                        parent_element = $(this).closest('ul');
                    parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current-menu-ancestor');
                    $(this).parent().addClass('current-menu-item current-menu-ancestor');
                })
            }
        })
    });
})(jQuery);
</script>

I'm open to alternative solutions as well, it doesn't need to be JS.

wordpress css jquery javascript
1 Answers

So what I realized was that the code I had copied didn't have the proper class order to identify my menu items. I edited the value of var menu_items_links and made some slight changes to the initial line of the code to produce this:

jQuery(document).ready(function ($) {

        var menu_items_links = $(".menu li a");
        menu_items_links.each(function () {
            if ($(this).is('[href*="#"]')) {
                $(this).parent().removeClass('current-menu-item current-menu-ancestor');
                $(this).click(function () {
                    var current_index = $(this).parent().index(),
                        parent_element = $(this).closest('ul');
                    parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current-menu-ancestor');
                    $(this).parent().addClass('current-menu-item current-menu-ancestor');
                })
            }
        })
    });

It's now working as intended!

user_142841830
Related