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.

Improve this question

3 Answers 3

Reset to default
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.)

Improve this answer
1
  • Something so simple, figured it would require a custom hook or function (not sure why).. thank you for you help! Commented Nov 9, 2012 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

Improve this answer
-1

Simpler is

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.