- This topic has 11 replies, 2 voices, and was last updated 4 months, 1 week ago by Sebastian.
Author | Posts |
---|---|
equilibrianaturals
December 8, 2016 at 1:20 pm
|
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
December 8, 2016 at 3:36 pm
|
Certainly. Would you mind posting a link to your site so I can see what’s going on? Cheers, |
equilibrianaturals
December 8, 2016 at 3:59 pm
|
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
December 8, 2016 at 4:00 pm
|
Of course. When ever you’re ready. Cheers, |
equilibrianaturals
January 11, 2017 at 1:03 pm
|
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
January 16, 2017 at 1:05 pm
|
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.
I hope that helps. Please let me know if you have any further questions. Cheers, |
equilibrianaturals
January 19, 2017 at 5:01 pm
|
Oh, no problem at all – and congratulations! Thank you for that, it worked perfectly for the shop and category 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
January 21, 2017 at 9:59 am
|
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, |
equilibrianaturals
January 23, 2017 at 1:29 pm
|
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
January 23, 2017 at 3:47 pm
|
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:
Cheers, |
docTrypticon
May 24, 2024 at 3:59 pm
|
Good morning – I know this is seven years later, but I wanted to thank Sebastian on his resolutions. You just helped me fix something that’s been driving me nuts all week. THANK YOU!!!!!! |
Sebastian
May 24, 2024 at 8:26 pm
|
Ha! Brilliant. Glad to hear this helped you, and thanks for dropping by. Have a great weekend! Sebastian |