Community Forums › Forums › Archived Forums › Design Tips and Tricks › Change the Color of Navigation Hover
- This topic has 7 replies, 3 voices, and was last updated 11 years, 3 months ago by prycus.
-
AuthorPosts
-
December 15, 2012 at 8:07 am #5394prycusMember
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.
December 15, 2012 at 8:42 am #5400SusanModeratorLook 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.
December 15, 2012 at 8:29 pm #5488prycusMemberHi 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
December 16, 2012 at 12:45 am #5509Aaron HartlandMemberNo 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+December 16, 2012 at 12:55 pm #5580prycusMemberThanks 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
December 16, 2012 at 1:42 pm #5586Aaron HartlandMemberIn 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+December 16, 2012 at 1:45 pm #5588Aaron HartlandMemberOne 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+December 17, 2012 at 11:39 am #5762prycusMemberThanks for the help!
-
AuthorPosts
- The topic ‘Change the Color of Navigation Hover’ is closed to new replies.