News Pro Menu Color Change

[kdgjevre]

Can you please help me with a color change on the menu. I think currently the CSS does not treat hover over the main menu differently than hover over the sub menu.

What i would like to do is if you hover over the menu option Become a Specialist - and your mouse is still pointing to Become a Specialist I would like the text on the sub items to be a darker color. But if i change the hover color it also changes the main menu option. I want the main menu option to STAY white as it is in hover state but the sub menus to have a different text color while i am hovering over the main menu.

Thank you for the help.

http://bas.sharonbroughtonteam.com/

[Jeremy]

The nature of CSS (cascading style sheet) means styles that are lower on the style-sheet over-rule styles above.

Looking at your style.css the active property for the submenu is on line 1167 while the active property for the main nav is on 1772.
Therefore even though you are styling the sub-menu with a darker color the main nav color over-rules due to it's position on the stylesheet.

Two ways you can fix.
1. Either move the sub styling so it lies below line 1172 .news-pro-pink .genesis-nav-menu a {color: #ffffff;}
2. Add !important to the color: property below. This is the easy fix but it's not best practice to use !important too often.

.genesis-nav-menu .sub-menu a {
background-color: #d2dce9;
border: 1px solid #e3e3e3;
border-top: none;
padding: 12px 24px;
padding: 1.2rem 2.4rem;
position: relative;
width: 200px;
color: #333 !important;
}

---

If you want to say thanks Follow me on Twitter | My Website

[kdgjevre]

Thank you for the great explanation. I learned something. 🙂

[Author]

Posts