0

I have a nav menu call:

'primary', 'container_class' => 'primary-menu' ) ); ?>

The output looks something like this:

<div class="primary-menu"><ul id="menu-other-links" class="menu">
<li id="menu-item-51" class="menu-item menu-item-type-custom"><a href="#">RSS</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-post_type"><a href="http://localhost:8888/graca/contacto/">Contacto</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-custom"><a href="#">Facebook</a></li>
<li id="menu-item-53" class="menu-item menu-item-type-custom"><a href="#">Twitter</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type"><a href="#">Site Info</a></li>
</ul></div>

I'm trying to apply a different background color to each menu item, so #1 would get one color, #2 a second color.

I would like the theme work for whatever menu items someone wants to set up- so it would be preferable it the #id on each li went in order.

Eg:

<ul>
<li id="item1">List item</li>
<li id="item2">List item</li>
<li id="item3">List item</li>
<li id="item4">List item</li>
</ul>

Any help would be appreciated.

  • do you want to reorder the li items id's? – Fatih Toprak Oct 27 '12 at 9:18
  • Thats what would happen if he meddled with the IDs as he wants, he's looking for a fix to his problem, he's looking for a fix for a fix for a fix for his problem – Tom J Nowell Nov 29 '12 at 12:20
1

If you can stand to not have it be backwards compatible, CSS3 introduced the nth-child selector, you could leverage that

0

check out http://codex.wordpress.org/Function_Reference/wp_nav_menu and look for the items_wrap part

0

Go to WP-admin -> Appearance -> Menus -> Screen options (top right) -> Check CSS Classes -> Open menu item and put your custom class you want and prepare style for it.

The best and easiest way to create custom CSS for each element in menu.

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.