WordPress.org

Support

Support » How-To and Troubleshooting » New Menu System

New Menu System

  • I am working with the new menu system for wordpress 3.0.

    My website: http://www.abinteriordesigns.com/wp/

    As you can see in the top navigation there is a | on the left of the “Home” link. In the old wp-list-pages short code, or whatever it was. There was a “first-child” code I could use in css to tell the first one in the group to not have a border. How in the world do i do this for the new menu system?

    I see that it it gives that particular list an ID and Class of “menu-item-31” but when i try to style it nothing happens.

    Here is my CSS:

    #menu-main-menu { list-style: none; margin: 0; padding: 0; }
    #menu-main-menu li { display: block; float: left;  }
    #menu-main-menu li a { text-decoration: none; color:#543019; }
    #menu-main-menu li a:hover { text-decoration: underline; color:#C00; }
    #menu-main-menu li:first-child  { background: none; border-left:none;}
    #nav { height: 16px; position: relative; z-index: 200; font-weight:bold; }
    #nav #menu-main-menu a { color:#543019; }
    #nav #menu-main-menu > li { background:url(/images/nav-vert.png) right no-repeat; display: block; float: left; padding-left: 1px; }
    #nav #menu-main-menu > li > a {   padding: 0 20px; text-decoration: none; font-size:22px;  border-left:3px solid #b2bdc5; line-height:16px; height:16px;}
    #nav #menu-main-menu > li > a:hover { color:#666; }
    #nav #menu-main-menu > li:first-child { background: none; border-left:none;}
Viewing 3 replies - 1 through 3 (of 3 total)
  • Using the :

    #nav #menu-main-menu > li:first-child { background: none; border-left:none;}

    Had always worked previously.

    I even tried

    #nav #menu-main-menu > li:menu-item-31 { background: none; border-left:none;}

    This will do it on the last line
    you currently have
    #nav #menu-main-menu > li:menu-item-31{ background: none; border-left:none;}
    change to
    #nav #menu-main-menu > li#menu-item-31 > a{ background: none; border-left:none;}

    because the border is set on all a{} in the menu you have to override the A within the menu-item-31. Also reference IDs by # not :

    I changed to:

    #nav #menu-main-menu > li#menu-item-31 > a{ background: none; border-left:none;}

    Excellent work. Thank you for your help

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘New Menu System’ is closed to new replies.