Need help? Check out our Support site, then


Changing the Hover Color for Main Menu in the Sundance Theme

  1. 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 blacknectar.me.

  2. 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).

  3. 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.

  4. 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

  5. Thanks so much! It worked. Appreciate it!

  6. Yay! Happy to help. :)

Topic Closed

This topic has been closed to new replies.

About this Topic