Hamburger Menu Interaction is Interfering with Button Interactions

Hi to the Webflow community, and thanks in advance for your help :slight_smile:

I think there is some interference between the interaction on the hamburger and the interaction & function of my buttons on the Home page of my website. Could somebody help me to figure out what this could be? I’m struggling hard, and new to Webflow!..

By way of explanation:

The buttons on Home at http://kfo.webflow.io were working beautifully, with a really slick jade green wipe-across interaction on hover on my black buttons throughout the site - until I added the nav bar.

When you load my homepage now, the buttons are unreactive on both desktop and mobile. They only perform correctly (linking to destinations and with their intended interaction hover effect) once you have opened and closed the hamburger menu once.

I’m stumped!

Thanks,
Katy


Here is my public share link: http://kfo.webflow.io

Hey @Katy_O, please also share your project’s read-only link. Thanks.

For now, my best guess is that the Menu is sitting on top of the whole page on load. Even though it is at 0 opacity it is still covering and nothing below it can be hovered/selected. Think of it like a piece of glass. You can see through it, but it is still a solid barrier.

The close menu interaction, must be turning the menu to display:none as well as dropping the opacity. Add an initial state of display:none to the menu. I think that should solve it.

Like I mentioned above, if you share the project read-only link, then we can confirm if that is in fact the issue or note. Hope that helps and welcome to the community!