0

I would like style the main horizontal Wordpress menu so that the first 3 items are aligned to the left and the last 3 items are aligned to the right.

This will create the appearance of two menus (with login, etc., on the right) but make it easy to restyle it to create a responsive menu with the last three items at the bottom.

MENU:

<UL> 
<li>1a</li><li>2a</li><li>3a</li> <-left    right-> <li>4a</li><li>5a</li><li>6a</li>
</UL>

Using float left and right causes the last 3 items to change order, I need them to stay in order.

I would like a solution that does not require creating a separate menu or changing the order of the menu items to make the float:right put them back in the right order.

I have tried various combinations of display:inline-block and text-align:left/right, with no luck.

EDIT: I would like to do this without adding markup into the menu itself. (Unless the answer also illustrates how to add markup into a Wordpress horizontal menu.)

closed as off-topic by Howdy_McGee, Pieter Goosen, birgire, Michael, TheDeadMedic Mar 27 '15 at 10:47

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    This is purely a CSS issue and probably better suited for StackOverflow. – Howdy_McGee Mar 27 '15 at 3:37
  • I see what you mean. I did not initially specify in the question that I am talking about Wordpress menus. However it is about a Worpress menu, otherwise the answer given by Andrei Gheorghiu would be acceptable as well. However in a Wordpress menu I dont think it is so easy to add html markup at specific places. – AJD Mar 28 '15 at 3:23
  • It doesn't matter if the menu is WordPress or not, as you see in the answer, there is nothing specific to WordPress to solve the problem. – cybmeta Mar 28 '15 at 9:38
2

There's an easier way with no markup changes and minimal CSS. Live demo/fiddle here, code below:

<ul> 
  <li>1a</li><li>2a</li><li>3a</li><li>4a</li><li>5a</li><li>6a</li>
</ul>

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}
li {
    float: left;
}
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
    float: none;
    display: inline-block;
}
0

You need to wrap your two groups (left and right aligned items) in two containers. You than set float left, respectively right on those containers.

<UL> 
    <div class="pull-left"><li>1a</li><li>2a</li><li>3a</li></div>
    <div class="pull-right"><li>4a</li><li>5a</li><li>6a</li></div>
</UL>

And make sure the inside elements have display set to inline-block. You also want to set overflow property of ul element to 'hidden', to make sure it expands to contain all the children, since both are floating.

.pull-left { float: left; }
.pull-right { float: right; }
.pull-left li, .pull-right li { display: inline-block; }
ul { overflow: hidden; }

Setting overflow: hidden for all the ul elements in your project might not be a very good idea, so you might want to find a parent selector of your ul and add it in front of the ul selector. (ex: .some-container-class-here ul { overflow: hidden;} )

  • I can see how this would work, but being a Wordpress menu, I don't know how to add the extra markup. – AJD Mar 28 '15 at 3:20

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