Hi there – I’m having trouble figuring out how to set the parent menu item text color to change to it’s “active” color (already set) when any of the sub-items in that menu are active. I’ve tried targeting current-menu-parent, current-menu-ancestor, menu-item-has-children a:active, and a bunch of other selectors and they either don’t work at all or change the color of all menu items whether parent/child or active/inactive.
Any help you can offer would be greatly appreciated!
Thanks for your quick reply! The site actually isn’t “live” yet, but it should be within a week or so. I’ll come back and post the link then, if that’s cool.
Following up – the site has been up for a few weeks and I think I’m done tweaking the menus 😉
The main navigation is the only one with drop-downs that I’d like to have the parent menu item show the color set for it’s active state when any of the sub-menu items are “current”.
Sorry for the slow reply. I’ve just got back from my honeymoon. You were on the right track, you just need a use the > character to specify links that are the direct descendant of the li element with a class of current-menu-parent e.g.
.current-menu-parent > a
I hope that helps. Please let me know if you have any further questions.
Thank you for that, it worked perfectly for the shop and category pages 🙂
I also used “.current-page-parent > a” to have the top-level menu item show it’s active state on single product pages.
However, on the single product pages, all the sub-menu items (categories) that the individual product belongs to are also showing the active link color (which makes sense because on the single product page, I guess those categories are now the parents).
Do you know if there ‘s a way to specify only the top-level menu item? Or, to specify only the “primary” category as set in WooCommerce?
Just so I’m clear on what you want. On this single product page, MINI SIZES is blue (active) and so is FACE MINIS. But in this case, you only only want MINI SIZES to be blue?
You can target HTML elements by making reference to more than one class by joining classes without a space. So this might work:
Actually on the single product page you linked to, I do want both MINI SIZES and FACE MINIS to be blue, but what I don’t want is the SHOP menu and ALL SKIN CARE (child of shop menu) to be blue.
Having two of the menus highlighted at the same time just seems confusing, and I want people to know where they are in the shop since I’m not using breadcrumbs.
Yes, I see what after now. I can’t see a way to achieve this with CSS, given how the classes have been applied to the menu items. However, Microthemer has a JavaScript tab in the View > Custom code screen. If you add the following JavaScript, it should remove the active class from the ‘Shop’ menu item if another top level menu item is active:
var $active = jQuery('#menu-main-menu > li.current_page_parent, #menu-main-menu > li.current-menu-parent');
if ($active.length > 1) {
$active.first().removeClass('current_page_parent current-menu-parent') ;
}
