Target Parent Menu Item when Sub Menu Item is Active

This topic contains 9 replies, has 2 voices, and was last updated by  Sebastian 5 years, 8 months ago.

Author Posts

equilibrianaturals

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 🙂


Sebastian

Certainly. Would you mind posting a link to your site so I can see what’s going on?

Cheers,
Sebastian


equilibrianaturals

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.

J.


Sebastian

Of course. When ever you’re ready.

Cheers,
Sebastian


equilibrianaturals

Hi Sebastian,

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”.

http://www.equilibrianaturals.ca

Thanks in advance for your help!

Jeannine


Sebastian

Hey,

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.

Cheers,
Sebastian


equilibrianaturals

Oh, no problem at all – and congratulations!

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?

Thanks again for your help!

J.


Sebastian

Hey,

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:

.current-menu-parent.menu-item-has-children > a

If that’s not quite what you want, there is also a :not() CSS selector.

Does that help at all?

Cheers,
Sebastian


equilibrianaturals

Hi,

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.

Does that make sense?

Thank you!


Sebastian

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') ;
}

Cheers,
Sebastian

You must login or register to reply to this topic.