Executive Pro: navigation menu hover color

[exelexys]

Would like to modify the navigation menu color scheme on Executive theme, but for some reason, the default menu item text color must be the same as the hover menu item text color, or at least, the default menu item text color can't be the same as the menu item hover background color. If it is, then the menu item text 'disappears', but can't seem to figure out why this happens. See attached images for reference:

On Executive Pro demo, the default menu item text color is the same as the hover menu item text color so this problem doesn't occur:

How does hovering over the submenu item change the text color of the menu item? Can't find the CSS which controls this.

Any CSS gurus out there who can help figure this out?

Thanks in advance!

[Au Coeur]

What is your URL?

Look for this in your stylesheet:

.genesis-nav-menu li:hover, .genesis-nav-menu a:hover

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[exelexys]

Site isn't publicly visible but temporarily disabled Under Construction page if you can take a look and let me know:
http://is.gd/VWmnuF

Thanks!

[Au Coeur]

Did you find the section I reference in your CSS file? That is what is controlling your text color change on hover.

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[exelexys]

Yes, found it. Tried changing all existing navigation menu color settings, but no luck. If the default color of the main menu text is the same as the hover background color (in this case white), hovering over the submenu item causes the menu text to 'disappear'.

In addition to the example in my original post, this is again evident when a main menu item with submenu items is the currently selected menu item. In this case, since the default text color (white) is not the same as the hover background color (there is none, since the currently selected menu item doesn't change color), the main menu item text doesn't disappear when hovering over the submenu items:

Need to add a selector to the CSS file to prevent this from happening, but haven't able to find the right one. It's still unclear why the main menu item background retains its color when hovering over submenu items, but the text doesn't.

Thanks

[Au Coeur]

You might find this helpful: http://stackoverflow.com/questions/11878887/keeping-hover-state-of-menu-button-when-using-sub-menu

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[exelexys]

Finally got this to work after being unable to look at it nearly a week.

Au Coeur, thanks for your help, couldn't have done it without you.

CSS (if anyone is interested) can be found below. Note this CSS is the entire Site Navigation section from Executive Pro, though only approximately the first half has been modified.

There are three color states each of which contain CSS properties background-color and color :

• default
• selected (main menu only)
• hover

In the CSS below, these correspond to:

• default
  • background-color: #35406b;
  • color: #fff;
• selected (main menu only)
  • background-color: #88c3e8;
  • color: #fff;
• hover
  • background-color: #fff;
  • color: #35406b;

Not everyone may want this same color state behavior, particularly when hovering over submenu items, but this seemed most plausible to me from a usability perspective. Feel free to change the colors/color states as anyone sees fit.

Added bonus: submenu behavior carries over to sub-submenu items (lending credence to the 'cascading' portion of CSS =)

/*
Site Navigation
---------------------------------------------------------------------------------------------------- */
.genesis-nav-menu {
	background-color: #35406b;
	clear: both;
	color: #fff;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

.genesis-nav-menu .menu-item {
	display: inline-block;
	margin: 0;
	padding: 0;
	text-align: left;
}

.genesis-nav-menu a {
	color: #fff;
	display: block;
	padding: 16px 20px;
	padding: 1.6rem 2rem;
	position: relative;
	text-decoration: none;
}

.genesis-nav-menu li:hover,
.genesis-nav-menu a:hover   {
	background-color: #fff;
	color: #35406b;
	text-decoration: none;
}

.genesis-nav-menu li:hover a { 
	background-color: #fff;
	color: #35406b;
	text-decoration: none;
}

.genesis-nav-menu li:hover .sub-menu a {
	background-color: #35406b;
	color: #fff;
	text-decoration: none;
}

.genesis-nav-menu li:hover .sub-menu a:hover {
	background-color: #fff;
	color: #35406b;
	text-decoration: none;
}

.genesis-nav-menu .current-menu-item > a {
	background-color: #88c3e8;
	color: #fff;
}

.genesis-nav-menu li.current-menu-item:hover > a {
	color: #35406b;
}

.genesis-nav-menu .sub-menu {
	left: -9999px;
	margin: 0;
	opacity: 1;
	padding: 0;
	position: absolute;
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition:    opacity .4s ease-in-out;
	-ms-transition:     opacity .4s ease-in-out;
	-o-transition:      opacity .4s ease-in-out;
	transition:         opacity .4s ease-in-out;
	width: 148px;
	z-index: 999;
}

.genesis-nav-menu .sub-menu a {
	background-color: #35406b;
	color: #fff;
	border-top: none;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 10px 18px;
	padding: 1rem 1.8rem;
	position: relative;
	width: 148px;
}

.genesis-nav-menu .sub-menu a:hover {
	background-color: #fff;
	color: #35406b;
	text-decoration: none;
}

.genesis-nav-menu .sub-menu .sub-menu {
	margin: -40px 0 0 147px;
}

.genesis-nav-menu .menu-item:hover {
	position: static;
}

.genesis-nav-menu .menu-item:hover > .sub-menu {
	left: auto;
	opacity: 1;
}

.genesis-nav-menu > .first > a {
	padding-left: 0;
}

.genesis-nav-menu > .last > a {
	padding-right: 0;
}

.genesis-nav-menu > .right {
	display: inline-block;
	float: right;
	list-style-type: none;
	padding: 16px 20px;
	padding: 1.6rem 2rem;
}

.genesis-nav-menu > .right > a {
	display: inline;
	padding: 0;
}

.genesis-nav-menu > .rss > a {
	background: url(images/icon-rss.png) no-repeat left;
	background-size: 12px 12px;
	margin-left: 12px;
	margin-left: 1.2rem;
	padding-left: 16px;
	padding-left: 1.6rem;
}

.genesis-nav-menu > .twitter > a {
	background: url(images/icon-twitter-nav.png) no-repeat left;
	background-size: 16px 16px;
	padding-left: 20px;
	padding-left: 2rem;
}

.genesis-nav-menu > .search {
	padding: 0;
}

.genesis-nav-menu .search-form {
	width: 100%;
}

[Author]

Posts