Nav menus current page link parent/ancestor highlight

  • I have some subnav menus that link to my CPT areas. I figured out how to make the subnav menu items stay highlighted by using #nav_menu-2 li.current_page_item etc. – and the native main nav items stay highlighted when clicked one level – but I’m trying to figure out how to keep both items highlighted as I drill down into my taxonomy, then terms to my single pages for North America, FSU, and Knowledge Center.

    https://avichai.pairsite.com p/w = letmesee

    Any help is greatly appreciated.

Viewing 14 replies - 1 through 14 (of 14 total)

  • Try adding this to the bottom of your theme’s style.css:

    .parent-pageid-38 #menu-item-7798,  /* North America */
.archive.tax-areas #menu-item-7861, /* Knowledge Center */
.parent-pageid-207 #menu-item-7861  /* FSU */ {
    background: rgb(246,148,90);
}

    The first one highlights North America in main nav on child pages;
    the second highlights Knowledge Center in main nav on child pages;
    the third highlights FSU in main nav on child pages.

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

    Hi Shaun. Thanks for the Reply. I added this to my theme’s StyleSheet, but I don’t see any change. Those three main menu items have been staying highlighted after initial click. But then as I drill down within any of those three CPT/taxonomies, the highlight on the main nav and subnav goes away. I’m trying to keep them highlighted all the way down to the single pages so a visitor doesn’t get lost. The breadcrumbs are mighty ugly and aren’t working right anyway.

    Would you have another suggestion I could try to fix the nav/subnav highlight issue?

    Ah, sorry…I applied the background color to the <li> not the <a> element. Try this instead:

    .parent-pageid-38 #menu-item-7798 a,  /* North America */
.archive.tax-areas #menu-item-7861 a, /* Knowledge Center */
.parent-pageid-207 #menu-item-7861 a  /* FSU */
{
    background: rgb(246,148,90) !important;
}

    I’m using classes from the <body> element that are unique to your sub-pages. For example, on child pages of North America, the <body> element is automatically being assigned a class of .parent-pageid-38 thanks to the wonderful body_class() function.

    For Knowledge Center, I used a different approach since it is not a parent page but rather a taxonomy archive. Using .archive.tax-areas singles out pages that have both the archive and tax-areas classes assigned.

    In all cases, I’m just singling out the ID of the particular menu item <li> to determine which item gets highlighted on which page.

    The !important part just makes sure nothing else overrides that rule.

    Hopefully that all makes sense! ??

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

    Yes – thank you – it works now to keep parent in main nav highlighted as I click through the taxonomy terms in the subnav. But what about when I go a level deeper to the single custom posts? Is there a way to keep the main and sub nav highlighted then?

    At first glance, the problem appears to be that, as you drill down further you switch from Pages to Posts. Pages are hierarchical, as are Post Categories, but your site architecture is mixing the two and there is no easy way of knowing which posts belong to which parent page.

    That said, you could add the following function (found here) to your functions.php file:

    add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
	if (is_single() ) {
		global $post;
		foreach((get_the_category($post->ID)) as $category) {
			echo $category->cat_name . ' ';
			// add category slug to the $classes array
			$classes[] = 'category-'.$category->slug;
		}
	}
	// return the $classes array
	return $classes;
}

    Then you can associate post categories with the appropriate navigation menu links, like this:

    .example-category #menu-item-7798 a,  /* North America */

    View the source of your website in your web browser while on one of the single post pages to see the classes that are added to the <body> tag.

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

    Thank you for sticking with me on this… I added the function, and the site returned:

    Warning: Missing argument 2 for add_category_to_single() in /wp-content/themes/suffusion-child/functions.php on line 19
    class=”page page-id-74 page-child parent-pageid-38 page-template-default logged-in admin-bar no-customize-support custom-background page-template-1l1r-sidebar-php minima suffusion-custom preset-custom-componentspx device-desktop”>

    Hmmm…I hadn’t tested that function, but you should be able to change it to this:

    add_filter('body_class','add_category_to_single');
function add_category_to_single($classes) {
	if (is_single() ) {
		global $post;
		foreach((get_the_category($post->ID)) as $category) {
			echo $category->cat_name . ' ';
			// add category slug to the $classes array
			$classes[] = 'category-'.$category->slug;
		}
	}
	return $classes;
}

    Not sure why that second function parameter was there…

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

    Excellent. It works to keep the subnav for single post. I applied it to the category-day-school-educational-technology menu item under NA Programs. But the main nav button is not staying highlighted with it.

    Try this:

    .category-north-america-programs #menu-item-7798 a {
    background-color: rgb(246,148,90) !important;
}

    That will make all single posts in the category north-america-programs show the North America menu item highlighted in the main navigation.

    Use background-color instead of just background as well. This is a more specific rule, so it is less likely to be overridden by other rules.

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

    Ok, this works. But I think I was mistaken about the single posts keeping their term highlighted in the subnav. So close…

    Keep at it. The key to remember is that you are styling a button, but you want to only style that button under certain circumstances. The <body> tag has many classes that can help you narrow down when that button gets styled.

    The buttons themselves are:

    #menu-item-7798 a  /* North America */
#menu-item-7861 a  /* Knowledge Center */
#menu-item-7861 a  /* FSU */

    Adding classes and/or IDs of elements that come before them will allow you to narrow down your CSS rules to only fire under the correct circumstances.

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

    Thanks for all of your time Shaun. You’ve been most helpful. I will try and work it out from here.

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

    I have discovered that my technique of using #nav_menu-2 li.current_page_item in stylesheet is what’s keeping the subnav items (CPT taxonomy terms) highlighted when on the CPT archive pages. And the technique you’ve given me is keeping the main nav item highlighted when on the CPT archive pages and CPT single pages.

    I just need to figure out how to also keep the subnav terms highlighted when on the single pages.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Nav menus current page link parent/ancestor highlight’ is closed to new replies.