[Resolved] Current page styling for menu with both WooCommerce and blog?

[Peter Duggan]

Hi Tom

Trying to set up a site with both Blog and Shop sections and struggling with WooCommerce styling Blog as the current page in the menu bar despite Shop base being set to /shop/:

Home

(Cart, Checkout and Account are all fine, but Shop home and individual product pages are not.)

I’ve tried tweaking CSS just about every way I can think (unsatisfactory partial solution currently implemented!), but wondering if I’m either missing something or maybe need a PHP solution along the lines of these threads?
https://generatepress.com/forums/topic/hide-sidebar-in-woocommerce-search-results-page/
https://generatepress.com/forums/topic/woocommerce-demp-store-notice/

Also (maybe for a separate topic?) getting two validation errors from Lightweight Social Icons I’d prefer to fix:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.kinlochlovin.org.uk%2F

Thanks
Peter

• This topic was modified 7 years, 11 months ago by Peter Duggan. Reason: Trying to work out why my first link didn't show!

[Peter Duggan]

Site link seems to have disappeared!

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

[Tom]

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 🙂

[Peter Duggan]

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.

[Peter Duggan]

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.

[Tom]

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.

[Peter Duggan]

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

• This reply was modified 7 years, 11 months ago by Peter Duggan. Reason: 'Resolved' rather than just 'solved'! :-)

[Peter Duggan]

‘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

[Peter Duggan]

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

• This reply was modified 7 years, 11 months ago by Peter Duggan.

[Tom]

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

[Peter Duggan]

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

• This reply was modified 7 years, 11 months ago by Peter Duggan. Reason: Typos

[Tom]

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

[Peter Duggan]

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

• This reply was modified 7 years, 11 months ago by Peter Duggan.

[Tom]

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 {

}

[Peter Duggan]

That’s great, Tom… 100% resolved! 🙂

Thanks so much
Peter

[Author]

Posts