WordPress 3.0 menu-item…different image based on id

  • Resolved lovduv

    (@lovduv)


    14 years, 7 months ago

    Ok I am trying to shortcut all the CSS involved with a rounded corner tab for my active page…

    Since in the new menu system your menu items have a generated ID is there a way in css to target the current menu item, so that I can add a background image to only the current-menu items id?

    For example…

    I have a generated ID of menu-item-31 the text for this link is 20px wide so I make my rounded corner image 20px wide and use it only when that page is active…basically instead of:
    #my-menu li.current-menu-item a {background: url(images/rounded-corner.png) no-repeat;}

    it would be something like:
    #menu-item-31.current a {background: url(images/rounded-corner-31.png) no-repeat;}

    Which obviously doesn’t work and I have tried a few variations just not sure if something like that is even possible and I should stop trying…I just HATE dealing with rounded corners and I only need the tab for the active page not the entire menu!

    Thanks for any input…

Viewing 2 replies - 1 through 2 (of 2 total)

  • it would be something like:
    #menu-item-31.current a {background: url(images/rounded-corner-31.png) no-repeat;}

    why are you not using the .current-menu-item class?

    you also may need to be more specific, like so
    #my-menu #menu-item-31.current-menu-item a {background: url(images/rounded-corner-31.png) no-repeat;}

    or use !important to force the style:
    #menu-item-31.current-menu-item a {background: url(images/rounded-corner-31.png) no-repeat!important;}

    Thread Starter lovduv

    (@lovduv)

    alchymyth I could KISS you!!!

    Indeed this worked:
    #my-menu #menu-item-31.current-menu-item a {background: url(images/rounded-corner-31.png) no-repeat;}

    My brain was fried last night and the 3.0 menu system so new to me I just couldn’t get the css right and the obvious just wasn’t popping out to me…sometimes it just takes fresh eyes … lol and that is why I posted…

    Thanks You!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘WordPress 3.0 menu-item…different image based on id’ is closed to new replies.