Change the Color of Navigation Hover

Community Forums Forums Design Tips and Tricks Change the Color of Navigation Hover

This topic is: resolved

This topic contains 7 replies, has 3 voices, and was last updated by  prycus 1 year, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #5394

    prycus
    Participant
    Post count: 2

    I would like to change the color of the hover on the navigation bar so that it’s different from the current page. For example, when you are on the home page, the home tab is active with an aqua color. As soon as you hover to another menu selection, the home tab remains aqua and any subsequent choice on the menu bar turns aqua. Can we choose another color for the hover options? How do I make this change in the style sheet? I am currently using the Metric child theme.

    http://www.one3ip.com/wpsite

    #5400

    Susan
    Moderator
    Post count: 7985

    Look for this in your stylesheet:
    #nav li a:hover, #nav li a:active {
    background: #72D4EA;
    color: #FFFFFF;
    }

     

    Replace the #72D4EA with a color of your choice.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #5488

    prycus
    Participant
    Post count: 2

    Hi Susan. Thanks for the info. However, after I made the modification in the style sheet of the Metric child theme, nothing seemed to change. I cleared the cache too. Do I need to modify the php files or perform some other task?   ….Paul

    #5509

    Aaron Hartland
    Participant
    Post count: 37

    No php is required. I believe that the block of css that you are looking for starts around line 213 of your css file and looks like this:

    #header ul.nav li a:hover, #header ul.nav li a:active, #header ul.nav .current_page_item a, #header ul.nav .current-cat a, #header ul.nav .current-menu-item a, #header ul.menu li a:hover, #header ul.menu li a:active, #header ul.menu .current_page_item a, #header ul.menu .current-cat a, #header ul.menu .current-menu-item a {
    background: #00B8DE;
    color: #FFFFFF;
    text-decoration: none;
    }

    Change the #00B8DE to your desired color and you should be all set.


    Aaron Hartland | http://www.aaronhartland.com
    Twitter  |  Facebook  |  LinkedIn  |  Google+

    #5580

    prycus
    Participant
    Post count: 2

    Thanks Aaron. The information you gave allowed me to change the color of the hover. However, what I really am looking for and perhaps I am not explaining this properly…

    My client likes the current color. So lets say you are on the home page and thus the home tab on the navigation menu is lit in aqua blue (# 72D4EA). If he should use the mouse and hover over other menu options, he wants the other menu options to appear in a different background color ( # B9DE00) in an effort to differentiate them from the current page.

    We want the active page to be # 72D4EA, and the others to appear as # B9DE00. Can this be done in Genesis? Hope to receive a response soon. Thanks very much.   ….Paul

    #5586

    Aaron Hartland
    Participant
    Post count: 37

    In the same block of css (above) the hover color of the other links is also being set. If you delete the “#header ul.menu li a:hover” line and then assign a new color to the same… you should be good to go…

    deleted hover color:
    #header ul.nav li a:hover, #header ul.nav li a:active, #header ul.nav .current_page_item a, #header ul.nav .current-cat a, #header ul.nav .current-menu-item a, #header ul.menu li a:active, #header ul.menu .current_page_item a, #header ul.menu .current-cat a, #header ul.menu .current-menu-item a {
    background: #00B8DE;
    color: #FFFFFF;
    text-decoration: none;
    }

    New bit of css for the hover state of the other pages (just update to your desired color):
    #header ul.menu li a:hover {
    background-color: #7CA513;
    }


    Aaron Hartland | http://www.aaronhartland.com
    Twitter  |  Facebook  |  LinkedIn  |  Google+

    #5588

    Aaron Hartland
    Participant
    Post count: 37

    One more thing… I might also add in the hover state of the current page here (so that the current page link doesn’t change color on hover):

    #header ul.nav li a:hover, #header ul.nav li a:active, #header ul.nav .current_page_item a, #header ul.nav .current-cat a, #header ul.nav .current-menu-item a, #header ul.menu li a:hover, #header ul.menu li a:active, #header ul.menu .current_page_item a, #header ul.menu .current-cat a, #header ul.menu .current-menu-item a, #header ul.menu .current-menu-item a:hover {
    background: #72D4EA;
    color: white;
    text-decoration: none;
    }

    Added in “#header ul.menu .current-menu-item a:hover”


    Aaron Hartland | http://www.aaronhartland.com
    Twitter  |  Facebook  |  LinkedIn  |  Google+

    #5762

    prycus
    Participant
    Post count: 2

    Thanks for the help!

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Change the Color of Navigation Hover’ is closed to new replies.