Community Forums › Forums › Archived Forums › Design Tips and Tricks › Navigation CSS problem in Executive Pro
Tagged: css, executive pro, navigation
- This topic has 2 replies, 2 voices, and was last updated 7 years, 6 months ago by danielleB.
-
AuthorPosts
-
September 5, 2016 at 10:19 pm #192674danielleBParticipant
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
September 6, 2016 at 5:31 am #192677Victor FontModeratorIt 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?September 6, 2016 at 8:41 am #192687danielleBParticipantThank 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.