WordPress Custom Menu Widget Style

1 Views

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.

Post Views: 1

Related posts

Leave a Reply

3 comments

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

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