Expand parent menu item when child is active


I have a post type which displays a menu in a sidebar. When the user is on a page that has children, the corresponding parent menu item expands. But when on a child page, the parent's menu item is collapsed.

I want to make the parent expand when one of its children is active. Can anyone point out the mechanic in Beans which governs when a menu item with children expands?

Here's a screenshot: https://www.dropbox.com/s/99qhhetadtmltw6/expand-parent.jpg?dl=0


Jo

It looks more like a CSS/UiKIT solution. I'm not familliar with UiKIT, but you can try this CSS code:

.myuniqueclass .current-menu-parent > .uk-dropdown {
    display: block;
}

.myuniqueclass - your unique sidebar navigation class or id.

.current-menu-parent - the active parent menu Enterprise Solution.

> .uk-dropdown - target the dropdown inside Enterprise Solution.

display: block; - Make the dropdown visible.

Note: If you want to target specific devices to make it visible, you should wrap the code inside media queries with the screen size you want.

// For example, display on screens with less than 500px.
@media only screen and (max-width: 500px) {
    .myuniqueclass .current-menu-parent > .uk-dropdown {
        display: block;
    }
}

UPDATED! It is reccomended to add an unique class for your sidebar navigation, so your code won't affect other navigations.

Edited 3 weeks, 6 days ago by Jo


Thanks for the feedback, Jo. You're right, it's more UIKit, less Beans.

There's more going on here than styling — some of the markup is being generated by UIKit in JS. I think what I'll do is use a walker.

Someone else built a similar walker as part of a WP theme. Good example for UIKit menus — it can be found here: https://github.com/zslabs/basey-theme/blob/master/inc/menus.php.

Write a reply

Login or register to write a reply, it's free!