- This topic has 5 replies, 4 voices, and was last updated 5 years, 1 month ago by
.
-
Posts
-
Hello,
On http://www.hepper.com/ the top nav menu items have some drop down options, but you'll notice that as soon as you move the mouse off the top level, the drop down will disappear again.
I've dug around to try to understand this function but haven't gotten a good grasp yet. Is there a setting/code to increase the area that activates the hover zone? Or to increase the menu open time (a delay before disappearing) somehow? Or a more simple way to make the drop down function properly?
It was working, but in some update or plugin deactivation recently, the dropdown stopped working.
Any advice?
Thanks!
http://www.hepper.com/I'm guessing that this is the relevant code:
/*
Site Navigation
---------------------------------------------------------------------------------------------------- */
.genesis-nav-menu {
clear: both;
color: #fff;
font-size: 14px;
font-size: 1.4rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.5;
width: 100%;
}
.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
}
.genesis-nav-menu a {
border: none;
color: #fff;
display: block;
font-size: 14px;
font-size: 1.4rem;
font-weight: 300;
letter-spacing: 1px;
letter-spacing: 0.1rem;
padding: 20px;
padding: 2rem;
position: relative;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
color: #ff9046;
}
.genesis-nav-menu > .menu-item > a {
text-transform: uppercase;
}
.genesis-nav-menu .sub-menu {
left: -9999px;
letter-spacing: 0;
opacity: 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: 225px;
z-index: 99;
}
.genesis-nav-menu .sub-menu a {
background: #444;
padding: 10px;
padding: 1rem;
position: relative;
width: 225px;
}
.genesis-nav-menu .sub-menu a:hover {
}
.genesis-nav-menu .sub-menu .sub-menu {
margin: -54px 0 0 159px;
}
.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: 20px 0;
padding: 2rem 0;
text-transform: uppercase;
}
.genesis-nav-menu > .right > a {
display: inline;
padding: 0;
}
.genesis-nav-menu > .rss > a {
margin-left: 48px;
margin-left: 4.8rem;
}
.genesis-nav-menu > .search {
padding: 6px 0 0;
padding: 0.6rem 0 0;
}
/* Site Header Navigation
--------------------------------------------- */
.site-header .sub-menu {
}
.site-header .sub-menu .sub-menu {
margin-top: -55px;
}
/* Primary Navigation
--------------------------------------------- */
.nav-primary {
background-color: #333;
}
.nav-primary a,
.nav-primary .genesis-nav-menu .sub-menu a {
color: #fff;
}
.nav-primary .genesis-nav-menu .sub-menu a {
background-color: #333;
border: 1px solid #444;
border-top: none;
}
.nav-primary .sub-menu a:hover {
color: #FF6600;
}
/* Secondary Navigation
--------------------------------------------- */
.nav-secondary {
margin-bottom: 20px;
margin-bottom: 2rem;
}
.site-footer .nav-secondary a {
color: #fff;
margin: 0 30px;
margin: 0 3rem;
padding: 0;
}
.site-footer .nav-secondary a:hover {
color: #999;
}
.site-footer .nav-secondary .genesis-nav-menu .sub-menu a {
background-color: #333;
border: 1px solid #444;
border-top: none;
padding: 16px;
padding: 1.6rem;
}
.site-footer .nav-secondary .sub-menu a:hover {
color: #FF6600;
}
Hi,
you can try increasing the z-index in .genesis-nav-menu .sub-menu
(100 worked for me)
I agree, increasing z-index will fix the problem. Also, you have a jQuery error that could cause other problems: ReferenceError: WPGroHo is not defined
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?Many thanks @Christoph and @Victor Font! the z-index seemed to work. I'm now digging into the jQuery error...
- The forum ‘General Discussion’ is closed to new topics and replies.