2

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:

<ul>
    <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>
    </li>
</ul>

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

2

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

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

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

-1

Simpler is

footer .menu-item {
   width:50%;
   float: left;
 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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