WordPress Split Menu

3 Views

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

  1. 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.

    Read More

  2. 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.

enter image description here

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. Possible with CSS:

    ul.2-columns {
  -moz-column-count: 2;
  -moz-column-gap: 60px;
  -webkit-column-count: 2;
  -webkit-column-gap: 60px;
  column-count: 2;
  column-gap: 60px;
}

  2. Not sure how to do this in WP. However, you could use a little jQuery to figure out how many top-level nav items there are, round that number up (to support odd numbers of nav items) and then add a class to the last element that you want to appear on the left of the logo. Then style on that class to add space between it and the next nav item. 

    $(function(){
 var navElements = $('.nav > li'),
     navElementsLength = $(navElements).length,
     middle = navElementsLength / 2,
     middle = Math.round(middle);
 $(navElements).eq(middle-1).addClass('left');
});

    http://www.bootply.com/ZKxhal2RgD#