Mobile navigation sub menus

Hi there,

I have seen versions of this question before, such as and, so sorry for the repetition!

My problem is, if you have a sub-nav in your primary navigation, where both the top-level, parent menu item and the sub-nav child menu items are links, it's annoying to use on mobile, because you can't see the child menu items without navigating to the parent page first. That is, if navigation is like so:

Parent A

Parent B

Child A

Child B

Parent C

on mobile all you see it

Parent A

Parent B Parent C

You might try to click on Parent B's "<" to accordion it open, and if Parent B is just a placeholder, clicking toggles the the uk-open class and it works great. But if Parent B is a live link, clicking opens the link.

My first thought was, let's make the little "<" icon into its own separate toggle button, rather than just an ::after pseudo-element. But then I worried it would be small and hard to click on mobile, but I don't know, phones are pretty big these days....

My second thought was, let's have the nested subnav open and fully visible by default. So I tried this

beans_remove_attribute( 'beans_menu[_offcanvas][_primary]', 'data-uk-nav', 'false' );

But that doesn't work. Is that because the menu walker is overriding it?

Thanks so much for any help with this!

Replying to myself here, just in case it's useful for someone else in the future, this is not elegant and I'm sure there are much better ways, but I am not a developer and it worked for me:

beans_modify_action_callback( 'beans_modify_menu_args', 'your_theme_modify_menu_args' );

function your_theme_modify_menu_args( $args ) { 
    // contents of beans_modify_menu_args with any modifications for your theme
    // (see
    // in my case, I deleted the line specifying data-uk-nav for offcanvas menus

Write a reply

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