[Resolved] delay menu dropdown

[freeform1999]

Hi, I tried adding time to your menu dropdown delay but it’s not work for me..
https://docs.generatepress.com/article/navigation-dropdown/

As a test I put in Customizer>CSS:

.main-navigation ul ul {
transition: opacity 500ms linear;
}

.main-navigation ul ul:hover > ul {
transition-delay: 5000ms;
}

The fade in works but not the delay.
Thoughts?

THX!!!!!!
Rand

[Leo]

Hi there,

The selector of the second block of CSS isn’t the same as what we suggested here:
https://docs.generatepress.com/article/navigation-dropdown/#dropdown-menu-transition

Can you give that a shot?

[freeform1999]

Thx Leo for reply!
Sorry, I think what I wrote was just my last fix attempt.
I just now put the orig. css in and still no go…
Now I have:

.main-navigation ul ul {
transition: opacity 50ms linear;
}

.dropdown-hover .main-navigation ul li:hover > ul {
transition-delay: 500ms;
}

Thx for any help.
Rand

[Tom]

Can you try the updated CSS here?: https://docs.generatepress.com/article/navigation-dropdown/#dropdown-menu-transition

Let me know 🙂

[freeform1999]

Thx Tom!
It still doesn’t seem to work.

I put in:
.main-navigation ul ul {
transition: opacity 0ms linear;
}

.dropdown-hover .main-navigation ul li:hover > ul {
transition-delay: 2000ms;
}

(I put 2000ms for testing. To be clear, I’m just trying to delay the dropdown a lil since I have a few buttons just below it on gallery post pages… and often over shoot them briefly which then the menu drops down instantly before my mouse can come down off of it…. like here: ../flickers/ )
THX
R

[freeform1999]

(btw, no urgency on this one. 🙂

[Tom]

.main-navigation seems to be missing :not(.toggled) in your code. I updated the article to include it – you may need to hard refresh?

Let me know 🙂

[freeform1999]

thx… that it now works!
Well, except that if I roll over the menu ever so briefly it doesn’t show for the specified delay EVEN IF I rolled off it within the delay time.
(The point is to avoid very brief rollovers. If this can’t be accomplished I’ll set the menu to drop on click.)
thx as always
R

[Tom]

I think you’d need to use a javascript solution to achieve something like that, unfortunately.

[freeform1999]

Ok.. thanks Tom!

[Tom]

No problem 🙂

[Author]

Posts