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

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

Home Forums Support Current page styling for menu with both WooCommerce and blog?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #192269
    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 5 years, 2 months ago by Peter Duggan. Reason: Trying to work out why my first link didn't show!
    #192270
    Peter Duggan

    Site link seems to have disappeared!

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

    #192312
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #192319
    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.

    #192320
    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.

    #192336
    Tom
    Lead Developer
    Lead Developer

    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.

    #192342
    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 5 years, 2 months ago by Peter Duggan. Reason: 'Resolved' rather than just 'solved'! :-)
    #192351
    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

    #192354
    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 5 years, 2 months ago by Peter Duggan.
    #192409
    Tom
    Lead Developer
    Lead Developer

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

    #192464
    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 5 years, 2 months ago by Peter Duggan. Reason: Typos
    #192516
    Tom
    Lead Developer
    Lead Developer

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

    #192525
    Peter Duggan

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

    • This reply was modified 5 years, 2 months ago by Peter Duggan.
    #192529
    Tom
    Lead Developer
    Lead Developer

    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 {
    
    }
    #192538
    Peter Duggan

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

    Thanks so much
    Peter

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.