Tweak for collapsible navigation menus on mobile

  • Resolved Decimus

    (@decimus)


    3 months, 1 week ago

    The one failing of the default WP nav block for us is that for on mobile sub-menus are not collapsible. Options for Block Themes v1.3.4 added an option for expandable submenus to the Navigation Block modal.

    This additional feature works nicely and we have implemented this plugin on our site – just to have collapsible sub-menus when the site is viewed on a mobile device. Thank you.

    With the default long form menu blocks we used a little bit of global CSS to highlight the parent menu if a sub-menu is active. We do this as it gives the visitor a visual cue if they are in a submenu item. We did this with the following CSS – it continues to work on the desktop version.

    ”’
    /* Ollie Navigation – Highlight parent page link when on child page */
    .wp-block-navigation-item:has(.current-menu-item) {
    color: #4D34FA !important;
    }
    ”’

    Wonder if its possible to add to our CSS to make this happen when also using the Options for Block Themes plugin – so if the active page is a sub-menu page the parent menu page is also highlighted?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Decimus

    (@decimus)

    I’ve nearly, but not quite got the CSS fixed – just need a little fine tuning and pointing in the right direction…

    When on a mobile device – this highlights the parent and all the children – rather than what I’d really like which is the the parent and the active child as per the desktop version.

    Wonder if there is a way to tweak this?

    /* Ollie Navigation - Highlight parent page link when on child page */
.wp-block-navigation-item:has(.current-menu-item)  {
   color: #4D34FA !important;
}

/* This highlights parent page link when on child page when using: Options for Block Themes plugin by Oliver Campion of Web:D which has an option for expandable submenus to the Navigation Block modal */
.wp-block-navigation.has-expandable-modal-submenus .wp-block-navigation-item:has(.current-menu-item)  {
   color: #4D34FA !important;
}

    many thanks

    Plugin Author Oliver Campion

    (@domainsupport)

    Hi Decimus,

    Thanks for the contribution! Would have replied sooner but weekends are often tricky ??

    I think this is what you are after … ?

    .wp-block-navigation.has-expandable-modal-submenus .wp-block-navigation-item:has(.current-menu-item)>a  {
       color: #4d34fa;
    }

    If you specifically target the direct descending a tag then it won’t affect all the other child elements. Also, you shouldn’t need !important so I’ve removed that too.

    Glad you like the plugin!

    Oliver

    Thread Starter Decimus

    (@decimus)

    That did it – I was putting the >a in the backets!

    LOVE the plugin and the expandable submenu. Its been my biggest issue with Block themes – hopefully it will make it to core. Vey happy.

    PS amazing service – did not expect an reply until next week.

    Plugin Author Oliver Campion

    (@domainsupport)

    Great news! A bottle of wine will always pique our interest ?? Will mark this as resolved!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.