Navigation menu on our client’s website is disappearing on hover. When you hover over the 2nd tier page in the menu, you get the drop down of 3rd tier pages. If you hover through the 3rd tier pages too quickly, they disappear without letting you select one.
I have a video recording but it won’t allow me to upload. Site is currently hidden from public view with an under construction page.
Hello Kate,
Perhaps the hover color to the menu items blends in with the background that is why they look like they disappear.
It would be easier for us to provide suggestions if we can check the site so please provide us with the admin access to your site in a Secure Note:
Hi Jade,
The color is not what is causing the menu to disappear. The menu actually closes while I am trying to hover over the third tier options. When you view the site, hover over Services > Color > and then quickly move your mouse down over the third tier pages. Before you are able to get to the bottom of the pages listed, the menu suddenly closes.
I have provided you with the login credentials via the Secure Note.
Thank you!
Hello Kate,
I have inspected your site and it appears that there is a broken code in your homepage. You have inserted this:
Copyright <script type="text/javascript">
document.write(new Date().getFullYear());
</script>. Create Beauty Lounge. All Rights Reserved.
<p></p>
<p style="letter-spacing: 2px; text-transform: uppercase;">Site By <a href="https://www.newmoonstrategy.com" title="New Moon Strategy"><font color="#593376">New Moon Strategy</a></p>
I have updated it and use this instead:
<p><Copyright <script type="text/javascript">
document.write(new Date().getFullYear());
</script>. Create Beauty Lounge. All Rights Reserved.</p>
<p style="letter-spacing: 2px; text-transform: uppercase;">Site By <a href="https://www.newmoonstrategy.com" title="New Moon Strategy" style="color:#593376;">New Moon Strategy</a></p>
And also I have updated your custom css as well because there are some missing curly braces.
/*
// Base.
*/
h1, h2, h3, h4, h5, h6 {
line-height: 1.2 !important;
}
.h-resp-main {
max-width: 15em;
margin: 0;
}
.h-resp-main.cs-ta-center {
margin-left: auto;
margin-right: auto;
}
.h-sup {
display: block;
margin-right: -0.15em;
margin-bottom: 0.5em;
font-family: "Open Sans", sans-serif;
font-size: 0.3em;
font-weight: 300;
letter-spacing: 0.15em;
line-height: 1.6 !important;
text-transform: uppercase;
color: inherit;
}
.h-resp-main > span {
display: block;
}
.h-resp-main a {
display: block;
padding: 10px 0px;
margin-right: -0.15em;
margin-bottom: 1em;
font-family: "Open Sans", sans-serif;
font-size: 0.675em;
font-weight: 300;
letter-spacing: 0.15em;
line-height: 1.5 !important;
text-transform: uppercase;
color: #e44065;
}
.h-custom-headline hr {
width: 50%;
max-width: 300px;
height: 3px;
margin: 1.5em 0 0;
border: 0;
font-size: 0.3em;
background-color: #DFCCE8;
}
.h-custom-headline.cs-ta-center hr {
margin-left: auto;
margin-right: auto;
}
.h-custom-headline p,
.h-custom-headline br {
display: none;
}
/*
// Header.
*/
.x-navbar .desktop .x-nav > li > a:hover > span,
.x-navbar .desktop .x-nav > li.x-active > a > span,
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: none;
}
/*
// Buttons.
*/
.x-btn {
padding: 0.65em 1.25em !important;
font-weight: 700 !important;
text-shadow: none !important;
}
/*
// Background Overlay.
*/
.x-bnb-bg-overlay {
position: relative;
overflow: hidden;
}
.x-bnb-bg-overlay:before {
content: "";
display: block;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0, 0, 0, 0.75);
}
/*
// Image Grid.
*/
.x-bnb-image-grid {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
align-items: stretch;
margin: -10px;
}
.x-bnb-image-grid > a {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-flex: 1 1 360px;
flex: 1 1 360px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 10px;
min-height: 300px;
font-size: 2rem;
box-shadow: 0 0.25em 1.5em rgba(0, 0, 0, 0.35);
}
.x-bnb-image-grid > a:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(21, 21, 21, 0.65);
transition: background-color 0.5s ease;
}
.x-bnb-image-grid > a:hover:before,
.x-bnb-image-grid > a:focus:before {
background-color: rgba(21, 21, 21, 0.35);
}
.x-bnb-image-grid > a:hover > .bg,
.x-bnb-image-grid > a:focus > .bg {
transform: scale(1.1);
}
.x-bnb-image-grid > a:hover > div > small,
.x-bnb-image-grid > a:focus > div > small {
color: #ffffff;
}
.x-bnb-image-grid > a > .bg {
display: block;
position: absolute;
z-index: -2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-size: cover;
transition: transform 0.5s ease;
}
.x-bnb-image-grid > a > div {
width: 100%;
padding: 1em;
font-size: 1em;
line-height: 1;
}
.x-bnb-image-grid > a > div > span {
display: block;
overflow: hidden;
font-size: 1em;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}
.x-bnb-image-grid > a > div > small {
display: block;
overflow: hidden;
margin: 0.35em 0 0;
font-size: 0.575em;
font-weight: 700;
letter-spacing: 0.065em;
line-height: 1.4;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
color: #ffffff;
transition: color 0.5s ease;
}
/*
// Room Column Intro.
*/
.x-bnb-room-col-intro {
padding: 0 0 14px !important;
}
@media (min-width: 768px) {
.x-bnb-room-col-intro {
padding: 1px 0 0 !important;
text-align: right !important;
}
}
@media(min-width: 768px) {
.x-navbar .x-brand {
position: absolute;
top: 0;
left: 0;
z-index: 1100;
}
}
.x-colophon.top {
background-color: #ffffff;
}
.x-colophon.bottom {
background: #ffffff;
}
.x-navbar .sub-menu a{
font-size:16px;
}
.x-colophon.bottom {
padding: 1px 0;
}
.x-colophon.top {
padding: 30px 0;
}
.x-colophon.top {
padding-top: 50px !important;
border-top: 1px solid #575757;
}
.x-colophon.top {
padding-bottom: 50px !important;
border-bottom: 1px solid #575757;
}
.x-colophon.top .widget,
.x-colophon.top .widget p {
font-size: 18px !important;
}
/* navbar drop shadow */
.x-navbar {
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
}
@media (max-width: 979px) {
.masthead .x-navbar-wrap {
height: auto !important;
}
}
And lastly, I have added this:
.x-navbar .x-nav-wrap {
z-index: 9999;
}
Kindly clear your caches or use private browsing mode and test your site again.
Hi,
Thank you for making those updates to my code. However, the menu is still disappearing upon hovering. Can you please let me know what is causing this issue?
Hello Kate,
I have revisited your site and I think I replicated the issue. Please be advised that the submenus will only remain visible if you hover over the submenu items. Hovering outside any of of the submenu items will make the submenu disappear.
Based from the screenshot above, if you hover over the outside bounds of the submenu chances are that the submenu will disappear. if you want to force it that it will display until you hover outside the submenu, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
.desktop .menu-item:hover > .sub-menu {
display: block;
z-index: 16000;
}
We would love to know if this has worked for you. Thank you.
Hi,
That code helped keep the menu open. You can close this ticket. Thank you!
You’re welcome!
It’s good to know that it has worked for you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.