Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Changing hover color in enterprise theme

  1. ctpcsw
    Member

    All I want to do is match the hover color of each navigation bar with the color of the navigation bar (i.e. the top nav bar is a blue color, I want the hover background to match, the lower nav bar is maroon and I want the lower hov background to match that as well)

    I've been trying to figure this out without posting the question here but I can't figure it out. Please help!

    Just for clarity - I do not want to change the color of the text in the hover (I like it white) I just want to change the background color of the drop downs/hover.

    The blog I need help with is ctpcsw.com.

  2. devblog
    Member

    Just an observation: The way you wrote your selectors rule is incorrect. In other words, if you want to change the background color of an element, this will suffice:

    background: COLOR;

    Writing extra values to the property like you did is just overkill, and they contradict themselves. Don't get me wrong, I'm not bashing you, I'm just giving you some input so that you code your rules in a more appropriate manner.

    Now, regarding your issue:

    Take all these selectors:

    #nav {
background:none repeat-x scroll 0 0 #153E7E;
}

#subnav {
background:none repeat-x scroll 0 0 #810541;
}

#nav ul li ul li a {
background:none repeat-x scroll 0 0 #153E7E;
}

#subnav ul li ul li a {
background:none repeat-x scroll 0 0 #810541;
}

#nav ul li ul li a:hover {
background:none repeat-x scroll 0 0 #808080;
}

#subnav ul li ul li a:hover {
background:none repeat-x scroll 0 0 #808080;
}

.nav li:hover > a {
background:none repeat-x scroll 0 0 #808080;
}

.nav ul li a:hover {
background:none rep eat-x scroll 0 0 #808080;
}

    and replace them with these:

    #nav {
background:#153E7E;
}

#subnav {
background: #810541;
}

#nav ul li ul li a {
background: #153E7E;
}

#subnav ul li ul li a {
background: #810541;
}

#subnav ul li ul li a:hover {
background: #810541;
}

.nav ul li a:hover {
background: none;
}

    If I understood you well, the code above should do what you want.

  3. ctpcsw
    Member

    Thanks a ton, and no offense taken. I'm clearly still figuring out CSS so I appreciate the help. I did exactly what you suggested and it looks good. The only thing now that I can't figure out is how to still have the gray highlight when something in the dropdown menu is highlighted. Any suggestions? Again, thank you a ton for your help already, it's very appreciated.

  4. devblog
    Member

    I'm sorry but it seems that today my level of reading comprehension is really low.

    The only thing now that I can't figure out is how to still have the gray highlight when something in the dropdown menu is highlighted.

    I thought you wanted to have the background removed and have it the same as the menu (blue/maroon)?

    So... do you want the submenu items to have a gray background when they're being hovered?

  5. devblog
    Member

    I did miss one selector in the code I previously gave you. If you don't want the main menu item to have a gray background whenever a submenu item is hovered, then add this to your CSS

    .nav li:hover > a {
background: none;
}

    If you want the gray background when a submenu item is hovered, that's the current behavior of your menu... However if you want a different gray (or another color instead), substitute the "none" value with whatever color you want. Example:

    .nav li:hover > a {
background:  #808080; /*I'm using the color you had before*/
}

    Let me know if this is still not what you want....

  6. ctpcsw
    Member

    Thanks! It's not you, perhaps I wasn't very clear on what I wanted. I went ahead made the hover a different color (because it looks better than gray) but when someone is hovering over the drop down menu I'd like the items in the drop down menu to also have the same hover color when someone's mouse is over them. Does that make sense?

  7. devblog
    Member

    I think it does... try this:

    Replace this selector:

    #subnav ul li ul li a:hover {
background:#810541;
}

    with these:

    #nav ul li ul li a:hover, #subnav ul li ul li a:hover {
background:#4863A0;
}

    What's going to happen is that when you hover on, let's say, Health & Safety, its background will change to a lighter blue, and when you hover on any submenu item (e. g. Legislative/Testimony), that item's background will be light blue too.

    Same thing for the "maroon" items. When you hover on "About PCSW", its background will be light blue, and when you hover on "Staff", its background will too be light blue. Did I get it right this time?

  8. ctpcsw
    Member

    PERFECTION! I can't thank you enough! Thank you, thank you, thank you!!

  9. devblog
    Member

    Glad it worked,

    BTW, I forgot to include one more change... if you come back to read this, replace this selector:

    .nav ul li a:hover {
background: none;
}

    with this:

    .nav ul li a:hover {
background:#4863a0;
}

    Basically you're changing the value of the background property from "none" to "#4863a0". Now your code for these changes should complete.

  10. ctpcsw
    Member

    Terrific! This worked like a charm. Are you on staff at wordpress or a volunteer?

  11. devblog
    Member

    Glad it worked.

    I'm just a volunteer.

  12. ctpcsw
    Member

    Thank you for everything. I think the site looks so much better now. I'm going to email wordpress to let them know how much I appreciated your help as a volunteer.

  13. devblog
    Member

    Thank you, but you don't have to do that. I really appreciate the thought, though.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags