What is best way to achieve this responsive menus setup?

Hi, thank you for your post! I’m sorry you are having trouble setting up a responsive menu. There are 3 ways to customize a responsive menu:

• manually – this method requires you to manually add custom CSS and is meant for intermediate users.
• CSS Hero – a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required).
• WordPress Built-in – WordPress makes it really easy to add menus and sub-menus.

• This reply was modified 4 years, 2 months ago by noobe1kenobe.

Hi, I realize I should had explained better:

WordPress Built-in – WordPress makes it really easy to add menus and sub-menus.

Yes definitively this one.
But how should I set it regarding the menu button for smaller devices, and also whats the best approach for the layout with the logo at the center, and menus on both sides. I know I can hide those menus with css, and then display the button for mobile, but maybe there’s a better way..

The WP built-in menu scheme really only outputs a nested ul/li structure. It’s up to the theme to decide how that gets displayed at various screen widths. I recommend finding a theme that works the way you want and using what they do as guidance for your own efforts.

IMO, I’d avoid the split menu, centered logo scheme. It’s virtually impossible to get it to appear balanced, given that the user can alter menu content at will. It’s better to center the logo above the menu line so the menu itself can be centered independently. If the logo must split the menu, maybe provide two menu areas and let the user decide which items go on which side. For mobiles the two menus can be stacked so they appear as a single menu.

Thank you!!

I recommend finding a theme that works the way you want and using what they do as guidance for your own efforts.

Well the themes I checked use two menus; one for left and the other for the right side and hide them/show with css.

It’s virtually impossible to get it to appear balanced, given that the user can alter menu content at will.

Maybe I’m able to set two divs with the max available space/same width such that they are balanced, and using flex start and end for left and right..

For mobiles the two menus can be stacked so they appear as a single menu.

Found this https://wordpress.stackexchange.com/a/299921
But I don’t fully understand it, in particular how to use wp_get_nav_menu_items()

I realized there’s no need to stack them that way. Just add the menu items into multiple places

• This reply was modified 4 years, 2 months ago by snippet24.

Question: how can I set this structure for the left and right menus? (which is bootstrap structure). I know I can use navwalker, can i specify it directly in functions.php for example?

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

The nav_menu function has a number of filters you can use to alter default menu item handling, so a functions.php solution should be feasible. Using a custom nav walker is probably the best solution. You can impose your walker on the menu through the ‘wp_nav_menu_args’ filter, assigning to the “walker” arg an instance of your walker class.

The only other approach I see is parsing the output string to count how many top level li elements there are, then inserting </ul><ul class="nav nav-right"> or similar at the proper spot in the string. You can use the ‘wp_nav_menu’ filter for that. String manipulation like this is inherently weak and why I think the nav walker approach is best.

Either way, of course you can balance left or right menu containers. My concern is balancing the menu item text itself. You can split an even number of items into left and right, but the text length of the items might be wildly different. And what if there is an odd number of items? Split the menu before or after the middle item? I suppose code could add up the characters that comprise the items and make the split as close as possible to the middle of the character count. Still will be unlikely to balance, but maybe it’s close enough.

Thank you so much!!
Implemented with Nav walker so far so good.

Still will be unlikely to balance, but maybe it’s close enough.

I think so ??
I have one issue: more than one menu can’t have the same location… Perhaps that could be a future feature request?

• This reply was modified 4 years, 2 months ago by snippet24.

Well, abstractly, more than one menu in a location could be seen as illogical, but I think I understand your dilemma. I think somehow the center logo HTML needs to be worked into the menu HTML, so that calling wp_nav_menu() outputs both halves as well as the logo.

I spoke earlier of splitting the menu by inserting closing/opening ul tags in the middle. Another possibility would be to instead insert an additional <li> menu item into the middle which contains the logo html.

Thanks again, I solved it : eliminated the ul tag from both menus for the mobile button, and return only the li elements for both left and right menus, while inserting them into hardcoded ul tag. In case it helps somebody this is the added code for returning only the li tags:

'container' => false,
'items_wrap' => '%3$s',

source: https://cerkit.com/2016/01/02/merging-two-menus-in-a-custom-wordpress-theme/