Changing the Hover Color for Main Menu in the Sundance Theme

  • Author
    Posts
  • #837800

    chsprauve
    Member

    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.

    #837933

    chsprauve
    Member

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

    #837937

    timethief
    Member

    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.

    #838127

    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

    #838143

    chsprauve
    Member

    Thanks so much! It worked. Appreciate it!

    #838155

    Yay! Happy to help. :)

The topic ‘Changing the Hover Color for Main Menu in the Sundance Theme’ is closed to new replies.