[Resolved] Menu dropdown closes too quickly

[Jin]

Background

I’m designing a website and the dropdown closes too quickly. I have a regular menu dropdown and a mega menu dropdown (from which I got help to implement previously in this, this and this GP tickets).

I’ve included the website URL in “Private Information”.

I have tried looking for other support tickets but couldn’t find any. I tried this solution but it didn’t work. (Btw I’ve disabled this in the current live website.)

The problem

I’ve recorded a short 10-second video of this issue to demonstrate it. Ideally, I’d like the user to have 0.4-0.8 seconds longer before the dropdown closes since this can be a very frustrating user experience.

Pretty sure that this has nothing to do with the mega menu

I’m pretty certain that this issue isn’t about the mega menu that I have because the dropdown closes too quickly for the default GP menu too.

But if that is potentially an issue, this is a screenshot of my current WordPress menu setup.

I don’t think that any of this is the problem but thought that it may be useful to include my current CSS (relating to the menu) too:

`

@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}

nav .main-nav .mega-menu > ul {
position: absolute;
/* Length of mega menu */
width: 75%;
left: 10% !important;
display: flex;
flex-wrap: wrap;
/* border-radius: 20px; */
}

nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}

/* This was custom added by Jin on 4 Mar 2022 */
/* Add custom CSS for the subheadings of the “Services” mega menu */
nav .main-nav .mega-menu-subheading > ul > li > a {
font-weight: 900; /* very bold */
/* Uncomment this because we don’t want to underline this */
/*
text-decoration: underline;
text-underline-offset: 5px;
*/
margin-top: 10px; /* Leave some space between the header and top of mega menu */
pointer-events: none; /* Disable links when mouse hovers over text */
font-size: 16px; /* 15px would be the same font size as the text below */
word-spacing: 4px;
color: #8c3171;
}

nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}

nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}

nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}

nav .main-nav .mega-menu > ul > li:hover > a,
nav .main-nav .mega-menu > ul > li:focus > a,
nav .main-nav .mega-menu > ul > li[class*=”current-“] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}

nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}

nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}

nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}

.main-navigation ul ul {
/* Make the borders of regular dropdown menus curve / round / circle */
/* border-radius: 15px; */
margin-bottom: 30px; /* Leave some white space below the last element in mega menu */
margin-top: 10px; /* Leave some space between the header and elements in mega menu */
}

/* Make any image w/ the CSS classes “has-floating-animation” and animate */

.has-floating-animation:hover .is-floating-animated {
animation: float-up-down 2s ease-in-out infinite both;
}

@-webkit-keyframes float-up-down {
0% {
-webkit-transform:translateY(0)
}

50% {
-webkit-transform: translateY(-5%);
transform:translateY(-5%)
}

100% {
-webkit-transform: translateY(0);
transform:translateY(0)
}
}

.entry-content,
.entry-summary {
text-align: justify;
}

/* Added by Jin on 9 Sep 2022 */
/* Change logo height */
.navigation-branding img {
height: 55px;
left: 20%; /* Making this 30% will cause it to overlap with menu text on narrower devices */
}
`

Thank you

[David]

Hi there,

the issue is this CSS you have:

.main-navigation ul ul {
    /* border-radius: 15px; */
    margin-bottom: 30px;
    margin-top: 10px;
}

That margin-top is the problem as it adds empty space between the top link and the submenu which breaks the hover state when mousing over it. If you remove that you should see the problem goes away.

Now instead of that CSS Add:

@media(min-width: 769px) {
    #site-navigation .inside-navigation {
        padding: 0 10px;
    }
    #site-navigation .main-nav > ul > li > a {
        line-height: 80px;
    }
}

What we did here is to remove the top and bottom padding from the inside nav, and added it to the menu item lineheight. This should give you the same result without the broken gap.

[Jin]

Thank you David.

I’ve cleared the cache and the new CSS has fixed the menu issue. But now there’s no space between the last element in the mega menu and the end of it.

How can I add a bit of padding / white space without breaking anything?

Screenshot of problem

Thanks

[Fernando]

Hi Jin,

The Staging site is currently on Maintenance mode, can you disable it temporarily?

Or, provide temporary admin access? Please use the Private Information field for this: https://docs.generatepress.com/?s=private+information

[Jin]

Hi Fernando

My bad I forgot to turn off the maintenance mode.

[Fernando]

Thank you!

Can you try adding this CSS in Appearance > Customize > Additional CSS:

li.mega-menu.mega-menu-subheading.menu-item > ul {
    padding-bottom: 10px;
}

[Jin]

Works great thanks

[Fernando]

You’re welcome Jin!

[Author]

Posts