WordPress.org

Support

Support » Themes and Templates » [Resolved] CSS Help: Assigning different text color to .current-menu-item a:hover

[Resolved] CSS Help: Assigning different text color to .current-menu-item a:hover

  • Okay, so here’s the problem…

    On my WordPress site, in the main navigation menu, I use CSS to style the buttons differently for each of three states…

    1. Current page
    2. Not current page
    3. Not current page w/ cursor hover

    …but I would like to add a fourth state…

    4. Current page w/ cursor hover

    …to prevent the text from “disappearing” (i.e. changing color) when the user mouses over the Current Page link.

    I’ve tried to do this by using .current-menu-item a:hover to no avail.

    Here is a link to my website: http://simplestartupkit.com/

    And here is my current CSS code for all things nav menu related:

    #navigation {
        float: right;
        height: 26px;
        overflow: hidden;
        list-style: none;
        margin: 0px;
        padding: 0px;
        border-bottom: 15px solid #FFF;
    }
    #navigation ul {
        display: none;
    }
    #navigation li {
        float: left;
        height: 25px;
    }
    #navigation a {
        background-color: #FFF;
        background-image: url("images/nav_link.png");
        display: block;
        height: 25px;
        border-left: 1px solid #709BAC;
        border-top: 2px solid #709BAC;
        border-right: 1px solid #709BAC;
        margin: 3px 0 0 0px;
        padding: 2px 10px 0 10px;
        font-family: arial;
        font-size: 13px;
        color: #1F6684;
        text-decoration: none;
        font-weight: bold;
    }
    #navigation a:hover {
        background-image: url("images/nav_link_hover.png");
        color: #FFF;
        border-color: #29708E;
    }
    #navigation .current-menu-item a,
    #navigation .current-menu-item a:hover {
        background-image: none;
        background-color: #FFF
        color: #1F6684;
    }
    #navigation a span {
        display: block;
    }
    #navigation a.active {
        -moz-border-radius-topright: 8px;
        -moz-border-radius-topleft: 8px;
        color: #666;
    }

    Any help will be greatly appreciated and rewarded with massive amounts of good karma. Thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
  • you could modify the existing style:

    #navigation .current-menu-item a,
    #navigation .current-menu-item a:hover {
    	background-image: none;
    	background-color: #FFF
    	color: #1F6684;
    }

    first, add a semicolon after #FFF; and maybe split the style into two – one for the link and one for :hover

    for instance:

    #navigation .current-menu-item a {
    	background-image: none;
    	background-color: #FFF;
    	color: #1F6684;
    }
    
    #navigation .current-menu-item a:hover {
    	color: #1F6684;
    }

    You rock! It worked, thank you so much. Not sure _why_ it worked, but it worked. 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Resolved] CSS Help: Assigning different text color to .current-menu-item a:hover’ is closed to new replies.
Skip to toolbar