Multiple menu items are being highlighted as current page

[Seblon]

First, I would like thank you for this amazing contribution! Without it I would be lost :)

Issue:

When the menu item for a custom post type archive (archive-karriar.php) is active, then also the blog menu item (home.php or index.php - which ever used) is hi-lighted as the current menu item.

Strange thing is, this does not happen the other way around - when home.php or index.php menu item is active, the cpt archive is not hi-lighted as current page. Other than that the walker i working flawlessly.

I'm using

• Wordpres 5.8
• Bootstrap 5.1

This is the code I'm currently using in header.php:

<nav id="main-nav" class="navbar navbar-expand-lg fixed-top navbar-light bg-light" aria-labelledby="main-nav-label">

  <div class="container-fluid">
    <a class="navbar-brand" href="<?php echo site_url(); ?>">
      <img src="<?php echo get_theme_file_uri('/img/logo.svg'); ?>" alt="" class="custom-logo">
    </a>

    <button class="hamburger hamburger--squeeze" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>

    <div class="collapse navbar-collapse" id="main-menu">
      <?php
      wp_nav_menu(array(
        'theme_location' => 'main-menu',
        'container' => false,
        'menu_class' => '',
        'fallback_cb' => '__return_false',
        'items_wrap' => '<ul id="%1$s" class="navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
        'depth' => 2,
        'walker' => new bootstrap_5_wp_nav_menu_walker()
      ));
      ?>
    </div>
  </div>
</nav>

I'm not sure what else info you would need, but if something is missing just let me know. Thnx!

[xrdm]

same problem here.

[crftwrk]

@xrdm do you have a link to your site?

[xrdm]

yes it's on mainteinance but if you need I can make it visible for a few minutes

[crftwrk]

yes please, a link will help.

[xrdm]

@crftwrk https://www.legalmalpractice.it/

"Articoli" are standard wp posts "Ultime sentenze" & "Convegni" are cpt (Convegni -> Prossimi o in corso give not problem because it's using a page tpl).

thank you

[xrdm]

this is the snippet for active class in my class-bootstrap-5-navwalker.php

$active_class = ($item->current || $item->current_item_ancestor || in_array("current_page_parent", $item->classes, true) || in_array("current-post-ancestor", $item->classes, true)) ? 'active' : ''; $nav_link_class = ( $depth > 0 ) ? 'dropdown-item ' : 'nav-link '; $attributes .= ( $args->walker->has_children ) ? ' class="'. $nav_link_class . $active_class . ' dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ' class="'. $nav_link_class . $active_class . '"';

[crftwrk]

Please switch v1.3.3 release https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker/releases/tag/v1.3.3, just for testing.

[xrdm]

yes it works but not in single articles. thank you

[crftwrk]

It's the current_item_ancestor added in v1.3.4 to show active link in WooCommerce product category. Good to know ;-)

[xrdm]

It's the current_item_ancestor added in v1.3.4 to show active link in WooCommerce product category. Good to know ;-)

now with 1.3.4 it's again not correct maybe :)

[pierrerocket]

Im running into the same issue here. I have the latest version of the walker. When on a custom post type single the blog link A in the nav is getting the active class, not the custom post type archive.

When I am on the custom post type archive page both the blog and cpt archive get the active class in the nav.

[qooglobal]

I'm facing the same problem.

Actually, I have a kind of single-page website. All the navbar menu items scroll to a specific section of the page.

The problem is all links have the active class.

The website is available here: http://development.8x.com/

Does anyone have the solution?

Thanks

[crftwrk]

That's because you use full URL in menu https://development.8x.com/#posts. Using full URL, scrollspy sets active class to menu-items. You must use short URL #posts for scrollspy.

1. Activate scrollspy on frontpage only. Change your frontpage id in line 2:

function add_scrollspy() {
    if( is_page('2257') ) { // Page id
      echo "<script>
        jQuery(document).ready(function ($) {
            var scrollSpy = new bootstrap.ScrollSpy(document.body, {
                target: '#top-section',
                offset: 58
            })
        });
      </script>\n";
   }
}
add_action( 'wp_footer', 'add_scrollspy', 0 );

2. Install https://wordpress.org/plugins/conditional-menus/ plugin. Now create two menus. One with short URLs to sections, one with long URLs. Set the menu with short URLs to frontpage and use menu with long URLs in all other pages. Check here https://bootscore.me/documentation/scrollspy-onepager/.

Does this help?

[qooglobal]

Thanks. It worked @crftwrk

[midaspider]

When I am on the custom post type archive page both the blog and cpt archive get the active class in the nav.

I have the same issue. When on a CPT archive the 'active' class is also added to the blog archive link. When on a CPT single the active class is not applied to the correct menu or sub menu link but it is again applied to the blog archive link.

Seems the walker is not currently compatible with WordPress custom post types?

[sancri]

The problem it's not in the walker code, the core wp_nav_menu function wrongfully adds a current_page_parent class to the menu item of the page assigned as the page_for_posts when a custom post type single or archive page is displayed. https://core.trac.wordpress.org/ticket/38486 https://core.trac.wordpress.org/ticket/13543

[CiceronePavaloi]

The bootstrap-5-wordpress-navbar-walker does filter the items classes when building the $class_names but when it sets the $active_class it checks against $item->classes which is unfiltered... So if one tries to fix the 'current_page_parent' class bug with a filter, it can't work.

I suggest replacing the line

$class_names =  join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));

with

$item->classes = apply_filters('nav_menu_css_class', array_filter($classes), $item, $args);
$class_names = join(' ', $item->classes);

[shrinitech]

Please switch v1.3.3 release https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker/releases/tag/v1.3.3, just for testing.

Hi, I was getting the same multiple highlighting issue, switching to v1.3.3 fixed it, thanks 😃