Current page styling for menu with both WooCommerce and blog?

Site link seems to have disappeared!

It's: http://www.kinlochlovin.org.uk/

Hi there,

Can you try creating your menu like this?: https://generatepress.com/knowledgebase/using-menus/

That might prevent it from happening.

Let me know :)

Seems nearly there, Tom...

If I do it like that and leave the unintuitive, need-to-click-the-top-level-link-to-see-the-page behaviour, it works perfectly.

But, if I create a new, non-clickable custom link for the top level and move the original 'shop' page to the top of the drop-down (which is what I'd prefer to do as more intuitive for users), I lose the current page menu styling from the new custom link when I'm on the main shop (products) page, and haven't worked out to get that back yet.

Works fine if I leave the top level clickable and add a duplicate item to the top of the drop-down. Which might just do with some thought about navigation labels.

Yea I'm not sure if there's a way around that - custom links don't have any relationship that WP can spot, the so the current class isn't added.

I'm OK with my latest solution now... Shop at the top level and Shop Home (was briefly Products) at the top of the drop-down, so no problem with the duplicate links when they both obviously lead to the page titled 'Shop'! Can't say I'd guessed that changing the automatic menu to a custom equivalent would solve my problem, so thanks for the suggestion and going to mark this 'resolved' now.

Still interested in the Lightweight Social Icons validation, but not a big deal for me when I can easily just hand-code in what I want for two links (just thought you might be interested too when it's your plugin).

Thanks again
Peter

'Resolved', but...

It's not styling the top-level menu selector as current on individual product pages (I think because WooCommerce treats them as blog posts?). So not the end of the world, but would still be good to get that sorted, and I'll certainly report back if I discover the solution first!

Thanks
P

Interestingly, the same thing happens on Blog when you make the menu this way.

Main Blog page has the 'current page' menu styling, but not the individual posts.

Main Shop page has the 'current page' menu styling, but not the individual products.

But yet the blog I've got running on another WordPress site with the default auto menus has the individual posts with the 'current page' menu styling.

Going back to 'Not resolved' through curiosity as much as hope of yet sorting it!

Cheers
Peter

The menu class structure is all handled by WordPress - it looks like it adds the current_page_parent class to the li element when in an individual post.

You can always do something like this will CSS:

.main-navigation .main-nav ul .current_page_parent > a {
    background: #222;
    color: #FFF;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

The Social Icons issue is kind of handcuffing. I either load the CSS in the footer only on pages that have the icons, or load them in the header (semantically correct) on every single page (even if social icons aren't used on the page).

Useful stuff, so now effectively sorted bar one tiny 'bug'. Your CSS above was the essential clue I needed when I'd already been trying to do it through CSS but hadn't worked out exactly what I needed to apply the styles to.

So this fixed the main problem:

.main-navigation .main-nav ul .current_page_parent > a, .main-navigation .main-nav ul .current_page_parent > a:hover {
	background: #f70c4b;
	color: #ffffff;
}

And this fixed a side-effect where my duplicate link at the top of the drop-down took on the parent colours when on individual product pages:

.main-navigation .main-nav ul ul .current_page_parent > a, .main-navigation .main-nav ul ul .current_page_parent > a:hover {
	background: #fff41a;
	color: #000000;
}

And I'm left with just this tiny problem I can't track down, where:

1. Using the drop-down on individual product pages causes the main menu parent colour above to revert only while you're on the drop-down.
2. Moving sideways from the main 'Shop' to 'Blog' or 'Contact' while on individual product pages causes a brief flicker away from the main menu parent colour.

But it's so insignificant that it can stay like that indefinitely if there's no obvious solution.

Re. the Social Icons, understood, and it's not a big deal because I can always just code something simple myself for our needs (just Facebook and Twitter on every page in that one position) if it bothers me.

Thanks
Peter

Any chance you can link me to an individual product page so I can see this?

http://www.kinlochlovin.org.uk/product/test-product-1/

Ah, GP adds a class to the item when hovering over sub menus, so your code would change to this:

.main-navigation .main-nav ul .current_page_parent > a, 
.main-navigation .main-nav ul .current_page_parent > a:hover,
.main-navigation .main-nav ul .current_page_parent.sfHover > a {

}

That's great, Tom... 100% resolved! :-)

Thanks so much
Peter