WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS Help: Assigning different text color to .current-menu-item a:hover (3 posts)

  1. Shaun Scovil
    Member
    Posted 3 years ago #

    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!

  2. alchymyth
    Forum Moderator
    Posted 3 years ago #

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

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

Topic Closed

This topic has been closed to new replies.

About this Topic