WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WordPress 3.0 menu-item...different image based on id (3 posts)

  1. lovduv
    Member
    Posted 3 years 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...

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

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

  3. lovduv
    Member
    Posted 3 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.