WordPress Custom Menu Widget Style

by

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.

3 Answers
3

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

Leave a Comment