WordPress.org

Ready to get started?Download WordPress

Forums

New Menu System (4 posts)

  1. bremmerm
    Member
    Posted 3 years ago #

    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;}
  2. bremmerm
    Member
    Posted 3 years ago #

    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;}

  3. Darrell Schauss
    Member
    Posted 3 years ago #

    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 :

  4. bremmerm
    Member
    Posted 3 years ago #

    I changed to:

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

    Excellent work. Thank you for your help

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.