Woocommerce shop page menu item.

This topic contains 15 replies, has 2 voices, and was last updated by  Sebastian 4 years, 1 month ago.

Author Posts

netix

I’m running the latest version of WP, Woocommerce, and Their Storefront Theme. I’ve been able to customize all of the navigation menu items for hover effects and to stay highlighted when landing on a particular page, except for the “Shop” menu item which stays highlighted regardless of which page I’m on.

How do I rectify this? Please advise.

Our site isn’t live yet, I want to fix this before we go live.


netix

Oh yeah, I’m using MT Version: 5.2.3.4 , and Chrome Version 67.0.3396.99 (Official Build) (64-bit).


Sebastian

Hey,

Would you mind posting a link to your site here or via our contact form so I can review what’s going on, and advise you further?

Thanks,
Sebastian


netix

https://statedwear.com/


Sebastian

Thanks for the link. Unfortunately I can’t connect to your site right now. Could it be offline? Or perhaps a firewall is blocking me…

I need to catch a train shortly, but will try to connect again later today.

Thanks,
Sebastian


Sebastian

Just to let you know, I still can’t access your site. I’ll await further instruction.


netix

I’ve been having issues with my firewall. I have support looking at it right now.
Are you in the EU? I have the region blocked. Maybe you can share your ip, I’ll
try to whitelist it.


netix

Okay, firewall issues resolved. I still have the EU blocked. I noticed your T & C indicates
you may be in the UK. Let me know and I’ll unblock your country, or please send an ip
address I can whitelist.


netix

Maybe you can access with Tor???


Sebastian

Hey,

Yes, I’m based in the UK. If you could whitelist my IP that would be great: 86.130.33.198

Thanks,
Sebastian


netix

Done.


Sebastian

Thanks,

Whitelisting me didn’t work unfortunately, but I was able to access your site via a proxy.

Your shop menu item is blue because you have a selector in the General _2 folder called Menu item 66 link _2 which sets the color and background. This is the code is generates:

/** General _2 >> Menu item 66 link _2 **/

#menu-item-66 > a {
	color: rgb(255, 255, 255) !important;
	background-color: rgb(114, 12, 223) !important;
}

If you delete that selector it should solve your issue.

After reviewing your other selectors, I have a tip for you; it’s possible to target multiple elements, like multiple menu items in your case, using a single selector. The targeting video, available from via MTs Help menu, shows how at the 6:45 mark: https://youtu.be/sEP3nUpbF-0?t=6m41s

My recent answer to another customer’s issue might be useful to read too, as it explains how to identify when an element has already been targeted with a selector by looking for a green + or blue numbers in targeting mode: https://themeover.com/forum/topic/microtheme-was-working-perfectly-on-the-site-then-it-stopped-working/

I hope that helps. Please let me know if you need further assistance.


netix

Sebastian,

I get what you’re saying, I did watch the recommended video and read some of your other posts relating to multiple elements. I highlighted the SHOP item as I did all of the other menu items and I wanted it to react the same way. When clicking the SHOP menu item it actually goes to the Woocommerce shop page.

The four SHOP sub menu items MEN, WOMEN, etc. are actually their own unique pages and will not be a SHOP page. I don’t believe I need to target multiple elements, I only want the SHOP item to be highlighted only when I’m on the SHOP page. I hope this helps.

Regards,

Ron


Sebastian

Hey Ron,

I see that you have tapped into Microthemer’s feature for limiting the scope of a selector to a single page. And this works quite well for highlighting the currently active menu item, when following your method of creating an individual selector for each menu item. Your About page for instance has a page id of 67 and a menu item id of 76. And so you are able to style the About menu item in a particular way when the user is on the About page using the following CSS selector generated by Microthemer:

.mt-67 #menu-item-76 a

However, the Shop page is an outlier. It is an archive page for product posts, and so doesn’t have its own page/post id. So Microthemer can’t add an .mt-123 class to the body tag. And in turn, you can’t target the Shop menu item using the same kind of selector as shown above.

Having inspected how WordPress updates the classes for the active menu item on your site, I think the following selector should work in all cases, not just for the shop menu item:

.current-menu-item a

You can look for the that selector when targeting e.g. the Shop menu item while on the Shop page. This will probably be one of Microthemer’s Targeting suggestions (with the advanced targeting options expanded in targeting mode).

Or, you could add a custom selector to your current folder via the selectors menu in the top left, adding the above code to the Code field.

I recommend disabling your previous selectors (that target individual menu items) once you’ve confirmed that the current-menu-item selector works for the Shop menu item (by hovering over the selector in the selectors menu and clicking the disable icon on the right). As it should also work for all menu items. And it’s nice to have a single selector target everything you want if at all possible. That way, if you want to change the background color or text color, you would only need to change this in one place.

Does that make sense?

If not, I would be happy to demonstrate by example. Please send access details via our secure contact form and I will show you via a quick video.

Cheers,
Sebastian


netix

Hey Sebastian,

This solution is fantastic! Thank you for all of your help.
This plugin is the bomb!

Regards,

Ron


Sebastian

You’re welcome Ron. I’m glad we cracked it in the end!

You must login or register to reply to this topic.