Streaming live at 10am (PST)

Hover menus don't open


#1

Hi, I have a website that changes menu color when scrolling to certain sections. There is a menu with black letters and another with white letters. When you hover over the black-letter menu, the dropdowns work fine, but in the white-letter menu the dropdown doesn't work. Could you take a look at my site and help me figure out what I'm doing wrong??

https://preview.webflow.com/preview/weddingg?preview=4c6299d70e361bdcb91fd4fe97162e3f

Thanks!!


#2

Hi @aerismel, thanks for your post and your read only link. Remember to check out our support guidelines here: http://help.webflow.com/general/guidelines

Could you let us know, what is the name of the menu in the navigator that is showing and the links are not working? I see you have three nav menus.

Thanks in advance smile Cheers, Dave


#3

I am very sorry Dave, I will try to be more specific. The menu that I am having problems with is the NAVBAR WHITE as you can see in the navigator in the picture below:

The thing is when I hover over the menu in the website it doesn't open the menu. You will see that when you hover over the menu that has the BLACK letters the menus open. But when you hover over the menu that has the WHITE letters the menus don't open.

I hope it was a bit clearer now.

Thank you Dave!!


#4

When doing a review of the site, I can see one issue with the z-index on the navbars

navbar class in navbar black has z-index of 10
navbar white menu has a z-index of 5.

The issue is caused because the navbar white has a lower z-index than the navbar class and the navbar white menu is below the original menu and links are not clickable.

To fix this, set the navbar white menu class to display none and opacity 0%. Next update the interaction to add a trigger, to make the navbar whitemenu display block and then opacity 100% on scroll into view, and display none and opacity 0% on scroll out of view.

I have made a quick video to describe this.

http://quick.as/zrjehv9l

I hope this helps, if not, let me know and I am happy to check further: smile Cheers, Dave


#5

Dave, it worked perfectly!! Thanks!!! You rock my friend. =)

I do have another question... How can I make the transition from the white to the black menu more smoother?? If you check the website you will see that when they are supposed to change, the menu that is supposed to hide disappears, and then the other starts to show. There is a micro second there that no menu is displayed. I was wondering if it is possible to make the transition change at the same time without having to wait for one menu to disappear and then show the other one.

I hope i was able to explain this. If not I will later add a video to show you what I mean.

Thanks my friend!!


#6

Hi, thanks @aerismel for the update. I think I understand what you mean about the momentary sec where the menu is not visible. Let me think on this and look again, and see what I can find out on this. Right now, all those triggers are in a single interaction, and only one trigger can be executed at a time in sequence. Good puzzle, I will have to check this and let you know what I find out.

smile Cheers, Dave


#7

Thanks for your support Dave!! I'll be waiting =)


#8

I managed to make the smooth change we were talking about, work on the logo. If you check the website you will see that when scrolling up or down it looks good. But for the menus, it only looks smooth going from the black section to the white section (scrolling up). When you scroll down (from white to black section) you will see that the menu jumps without smoothness. Hope you can help me check this out.

Thanks Dave.


#9

Hi again! I solved this. It was just the way I had arranged the elements inside the interaction. The display element had to show before the opacity and that way I managed to create the smooth change between menus.

I hope this helps someone. Cheers


#10

Awesome @aerismel, thanks so much for sharing smile Cheers, Dave


#11