Navigation CSS problem in Executive Pro

[danielleB]

I'm changing my website's theme to Executive Pro and am having a problem styling the primary navigation menu. I want the menu to look like the current site here: http://www.mrcpontiac.qc.ca/en/, but I can't figure out how to position the .sub-menu .sub-menu so it will display to the right of the .sub-menu. I have spent hours trying to figure out where I went wrong in my CSS file, even checked line-by-line against the theme's original CSS file, and I simply can't figure it out.

Can anyone help? Below is the faulty CSS code.

/* Primary Navigation
--------------------------------------------- */

.genesis-nav-menu {
background-color: none;
clear: both;
color: #fffefd;
font-size: 14px;
/*line-height: 1.5;*/
margin: 0px;
font-weight: bold;
overflow: hidden;
padding: 10px;/*This is the thickness of the primary menu bar across the page*/
width: 100%;
}

.genesis-nav-menu .menu-item {
display: inline-block;/*don't change this*/
text-align: centre;
}

.genesis-nav-menu a {
color: #fffefd;
display: block;
padding: 10px;
position: relative;
}

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

/*.genesis-menu .current-menu-item > a {
background-color: #64c9ea;
color: #fff;
}*/

.genesis-nav-menu .sub-menu {
left: -9999px;
margin: 0;
opacity: 0;
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: 220px;
z-index: 999;
}

.genesis-nav-menu .sub-menu a {
border: 1px solid #fffefd;
border-top: 1px;
color: #fffefd;
font-size: 13px;
padding: 10px;
position: relative;
width: 220px;
}

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

.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;
}

.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;
padding-left: 16px;
}

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

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

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

/*PRIMARY MENU ITEM STYLING - MRC
-----------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-mrc {
background-color: #2ea0dc;
width: 19.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-mrc a {
background-color: #2ea0dc;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-mrc li:hover,
.genesis-nav-menu .nav-mrc a:hover,
.genesis-nav-menu .nav-mrc .sub-menu a {
background-color: #2ea0dc;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-mrc .sub-menu a:hover {
background-color: #fffefd;
color: #2ea0dc;
}

/*PRIMARY MENU ITEM STYLING - SERVICES
------------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-services {
background-color: #8fc74a;
width: 19.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-services a {
background-color: #8fc74a;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-services li:hover,
.genesis-nav-menu .nav-services a:hover,
.genesis-nav-menu .nav-services .sub-menu a {
background-color: #8fc74a;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-services .sub-menu a:hover {
background-color: #fffefd;
color: #8fc74a;
}

/*PRIMARY MENU ITEM STYLING - PROGRAMS
-------------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-prog {
background-color: #f5970a;
width: 19.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-prog a {
background-color: #f5970a;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-prog li:hover,
.genesis-nav-menu .nav-prog a:hover,
.genesis-nav-menu .nav-prog .sub-menu a {
background-color: #f5970a;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-prog .sub-menu a:hover {
background-color: #fffefd;
color: #f5970a;
}

/*PRIMARY MENU ITEM STYLING - DOCUMENTATION
-------------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-doc {
background-color: #3c948b;
width: 19.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-doc a {
background-color: #3c948b;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-doc li:hover,
.genesis-nav-menu .nav-doc a:hover,
.genesis-nav-menu .nav-doc .sub-menu a {
background-color: #3c948b;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-doc .sub-menu a:hover {
background-color: #fffefd;
color: #3c948b;
}

/*PRIMARY MENU ITEM STYLING - COMMUNICATION
--------------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-presse {
background-color: #666;
width: 20.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-presse a {
background-color: #666;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-presse li:hover,
.genesis-nav-menu .nav-presse a:hover,
.genesis-nav-menu .nav-presse .sub-menu a {
background-color: #666;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-presse .sub-menu a:hover {
background-color: #fffefd;
color: #666;
}

---

Danielle

http://www.mrcpontiac.qc.ca/en/

[Victor Font]

It would help if you posted a link to the problem site. This may not be the answer since we can't see the problem, but look in functions.php for the following code:

//* Reduce the secondary navigation menu to one level depth
add_filter( 'wp_nav_menu_args', 'executive_secondary_menu_args' );
function executive_secondary_menu_args( $args ){

	if( 'secondary' != $args['theme_location'] )
	return $args;

	$args['depth'] = 1;
	return $args;

}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[danielleB]

Thank you Victor. I can't share the problem site since I'm developing locally.

I did locate the suggested code in the Functions file and disabled it, but it didn't change anything. I suspected a bad line of code or typo in the CSS file. I copied in the original CSS and it worked!

---

Danielle

[Author]

Posts