Wordpress Split Menu

Question

I'm coding my first WordPress Theme and trying to solve this problem:

On the desktop version of the website I’d like to split the menu into 2 sections. One would appear on the left of the logo and the other on the right of my logo (the logo is centered). The only way I know how to do this is to create 2 separate MENU objects in WP and then with CSS position each one accordingly.

This however causes a problem when I want to convert the menu into a mobile-friendly drop-down menu, because in the approach shown above I end up with 2 separate lists of menu items (Left and Right) and I don’t know how would I merge them into one list for mobile-friendly drop-down menu.

I understand I can write custom CSS to add margin between menu item #2 and item #3, for example. But since I’m writing a theme this approach won't work, as it requires to know upfront how many menu items will be present. I need it to be something that would work regardless of the number of menu items and that would allow people to re-arrange menu items using WP Menu UI.

Is this the wrong way to tackle this? If you could suggest how to approach this better I’d be very appreciative.

Answer 1

You can do this via css by pushing the first element of the second menu over, and then position:absolute your logo e.g. (not tested)

#element li:nth-child(4) {
 margin-left:300px;
}
#logo {
 position:absolute;
 left:500px
 top:50px;
}

Change the pixels to your desired lengths

This can also be done with jQuery append e.g.

$( "#element li:nth-child(3)" ).append( '</ul><ul class="right">' );

You would then target the second menu with it's new class e.g. .right

Answer 2

Just wanted to let everyone know I ended up using the suggestion by @selfagency above.It wasn't posted int he format of ANSWER, so I wasn't able to vote for it, here it is:

"Perhaps setup a third menu for mobile under Appearance > Menu and show the mobile menu in your mobile stylesheet while hiding the other two. It makes more sense to do it that way anyway if you want to optimize the experience for mobile users"

I found it the easiest solution and it works great! Thank you :)

The result could be seen at www.speakforwolves.org