Streaming live at 10am (PST)

Show background overlay on nav hover


So I have a nav menu and when you hover over the different menus I want the background to dim out using a background overlay. I have it somewhat working but when you hover out over the top or straight to the right of the menus the overlay persists. I’m not quite sure why it doesn’t disappear in those two places?

The menu I referring to is the white menu below the main nav:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You have no hover out animation applied. Reverse the interaction for the hover out interaction and you should be fine.

So the Nav item can’t have the hover out because other wise the dropdown menu will close when you hover off of it which is why it’s on the nav item wrapper. I just don’t know where to put the interaction so that it works correctly.

You may be able to use the legacy interactions for dropdown trigger to show/hide the overlay.

I couldn’t get it to work with Legacy interactions.

So I think I figured it out. I wrapped the nav items within another wrapper and when you hover out of that wrapper I have the background overlay close.

I’m still getting a little bit of wonkiness with the menu’s not always closing when hovering off of them. It’s not huge but it would be nice it I could tighten that part up.

The only other thought I had is if you put your overlay inside your dropdown underneath the menu so that it will show whenever the menu is open but be set to fixed position with a z index lower than the menu. It should the auto show/hide with the dropdown without an interaction.

So I think the overlay part of it is working how I have it. I just noticed now that the menus don’t always close off hover if you move your mouse back and forth really fast across all of them. I don’t know if that’s due to how it’s setup or maybe that’s just as good as the code can get for interactions? You have to kind of move you mouse really fast across all the menus to replicate it so I don’t know if it would really be an issue for users or not? I was just hoping to tighten it up a little.

I attached a screen shot of what happens.

Sounds like you need some custom code or to use the built in nav. or simply make them click to open instead of hover.