WordPress Split Menu

by

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.

2 Answers
2

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

Leave a Comment