Changing the Hover Color for Main Menu in the Sundance Theme

chsprauve · Member · Mar 4, 2012 at 8:40 pm
Copy link

Add topic to favorites
Hello,

I have changed the hover color successfully in the Sundance theme to brown using the code a:hover {
color:brown;}, but I’ve not had success changing the hover color for the drop-down menu. I like the color (blue) of the actual Menu, but I want the hover color of the dropdown menu to be brown. Does that make sense?

Here I am: http://blacknectar.me/

Thanks in advance!

The blog I need help with is: (visible only to logged in users)
chsprauve · Member · Mar 4, 2012 at 8:42 pm
Copy link
Also, I would like to change the hover color of the menu from black to brown. The hover color is brown for the rest of the links (as you can see).
timethief · Member · Mar 4, 2012 at 8:48 pm
Copy link
These days only Staff are providing CSS editing support. Please be patient while waiting for Staff to assist you and note that you may have to wait until March 6th.
designsimply · Member · Mar 6, 2012 at 6:25 pm
Copy link
I want the hover color of the dropdown menu to be brown.

To find how to change the colors in the top navigation menu, I opened the original stylesheet for Sundance and copied everything under the “=Menu” section.
https://s-ssl.wordpress.com/wp-content/themes/pub/sundance/style.css?m=1330964150g&minify=false

Then I deleted everything except the parts that set the colors, and here’s what I came up with:
```
.main-navigation a:hover,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_ancestor > a,
.main-navigation li.current-menu-ancestor > a {
	color: brown;
}
.main-navigation ul ul {
	background: brown;
}
.main-navigation ul ul a {
	color: #fff;
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul a:hover,
.main-navigation ul ul li.current_page_item > a,
.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current_page_ancestor > a,
.main-navigation ul ul li.current-menu-ancestor > a {
	background-color: maroon;
	color: #fff;
}
```
I used “maroon” as the submenu hover background color, but you could change it to brown or to a different color if you’d like.
http://www.w3.org/TR/css3-color/#svg-color
chsprauve · Member · Mar 7, 2012 at 2:44 am
Copy link
Thanks so much! It worked. Appreciate it!
designsimply · Member · Mar 8, 2012 at 12:44 am
Copy link
Yay! Happy to help. :)

No items found.