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.
http://avichai.pairsite.com p/w = letmesee
Any help is greatly appreciated.
-
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.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 thearchive
andtax-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! 🙂
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.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…
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 theNorth America
menu item highlighted in the main navigation.Use
background-color
instead of justbackground
as well. This is a more specific rule, so it is less likely to be overridden by other rules.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.
Thanks for all of your time Shaun. You’ve been most helpful. I will try and work it out from here.
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.
- The topic ‘Nav menus current page link parent/ancestor highlight’ is closed to new replies.