Support » Themes and Templates » Styling a css menu – WP 3.0

  • Resolved akatche


    Hi Friends, I have this problem. I’m using the new menu creator included in WordPress version 3.0, and when creating a menu creates this code

    <ul class=”sub-menu”>
    <li id=”menu-item-194″ class=”menu-item menu-item-type-taxonomy”>Name 1
    <li id=”menu-item-195″ class=”menu-item menu-item-type-taxonomy”>Name 2

    My question is how do I style each li individually?

Viewing 4 replies - 1 through 4 (of 4 total)
  • mrmist


    You can use

    wp_nav_menu( array( 'theme_location' => 'my-menu','container_class' => 'my_menu_div','menu_class' => 'my_menu_class' ));

    To assign class names..



    Forum Moderator

    in your style sheet (style.css ?) try to use:
    (because what you see are the html links, it is probably better to use the links for the styling; this depends slighly on your theme’s other styles)

    li#menu-item-194 { /*individual styles for 194*/ }
    li#menu-item-194 a { /*individual styles for the link 194*/ }
    li#menu-item-195 a { /*individual styles for 195*/ }

    if you need the current style to be individual as well, you could try additional:

    li#menu-item-194.current-menu-item a { /*individual styles for current 194*/ }



    Thank you both for your prompt answer! I based my work on alchymyth comment and finally the code looked like this: a {
    /*individual styles for current 194*/

    wordpress now allows you to add individual classes to each menu item. In your appearance > menus, pull down screen options, turn on css classes and there will be a field in each menu item to add a class. Now you can assign and style those classes individually.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling a css menu – WP 3.0’ is closed to new replies.