WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am wondering if anyone knows the best method for splitting 1 custom menu widget (located in my sites footer) in to 2 columns. There are a total of 8 links, so I would like it to be split in to 2 columns of 4 links. Not sure if there is a function for this or is there some CSS to achieve this? The HTML markup from the widget looks like:

    <li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-133">
        <a href="#">Link</a>

repeat that structure 7 more times for the line items code.

share|improve this question
up vote 1 down vote accepted

Purely with CSS you could set a width for menu items, float them and then set the UL to twice that:

footer ul {
    width: 200px;
footer .menu-item {
    float: left;
    width: 100px

(I don't know what elements you are using to designate your footer, you'll need to update that to match your structure.)

share|improve this answer
Something so simple, figured it would require a custom hook or function (not sure why).. thank you for you help! – Danny Nov 9 '12 at 19:21

You can assign individual CSS classes to the menu items from a custom navigation menu, in http://example.com/wp-admin/nav-menus.php.

So, the first 4 links would have a widget-left-column class, and the others widget-right-column.
So you'll be able to do your CSS stuff to split the widget in two columns (strict CSS questions are off-topic in WordPress StackExchange).

Assigning CSS classes to individual custom navigation menu items

Instead of repeating the same screenshots, I'll reproduce here @JeremyJared's answer to a similar Question:

First, go to the screen options and select the css checkbox:

enable navigation menu classes

Next, open the menu item and give it a class. In my example it would have the class .home-page:

navigation menu class

Note that for assigning more than one class, you have to use a whitespace to separate them.
navigation menus multiple classes
Which results in the following Html:
enter image description here

share|improve this answer

Simpler is

footer .menu-item {
   float: left;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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