2

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.

4
  • This can be accomplished with CSS depending on your dom structure for the area in question. Code? May 16, 2014 at 21:50
  • 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.
    – selfagency
    May 19, 2014 at 17:08
  • @selfagency Btw, just to explain, nothing against your suggestion, only trying to keep an certain standard for answers. That said, i feel for your suggestion to be an answer containing a actual solution you should add an explanation on how to distinguish the menus inside the code/templates. And someone made it a comment without me even flagging. May 19, 2014 at 17:36
  • Thank you everyone for the suggestions. I think I like the approach suggested by Selfagency best and will give it a try first. Question though - what is considered a better practice - (a) to have two menus Left and Right and then reposition them accordingly with CSS for mobile and thus avoid creation of a duplicate third menu element, or (b) create third menu in WP (for Mobile) and then hide LEFT and RIGHT menus with CSS in mobile and only show the MOBILE one instead?
    – hanazair
    May 20, 2014 at 18:03

2 Answers 2

0

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

1
  • These are very good tips... thank you! I will give it a go!
    – hanazair
    May 20, 2014 at 18:08
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.