Streaming live at 10am (PST)

Tablet & Mobile menu looks fine in editor but doesn't work in HTML

Hey everyone

I am working on my menu and something strange is happening. The tablet/mobile menu looks fine in the editor. All links are showing and the colours are as I want them to be. The background is a little bit transparant … so it looks like all is fine … but when I use the preview mode I just see a red background and no links are showing? Can anybody please tell me what I did wrong?

Cheers,
Timo


Here is my site Read-Only: Webflow - BedrijfsOntzorging.nl

(how to share your site Read-Only link)

Your nav menu is set to 100% height. Set it to 100vh instead, then give the NAV link elements static heights (like 75px or something).

Thank you so much for your response @Fonsume!

But I’m sorry … I’m such a noob … Where do I set the menu height to vh instead of % …? I’ve been checking Webflow tutorials since you placed your post but haven’t found it yet …

2021-03-13 15_16_44-Window

Just click the %

Sorry for the late reply. I’m at a dinner party with friends now. That seems easy enough. But what do I select? The menu button? Or a separate menu item?

You Nav Menu div…

Thanks @Fonsume! Finally got round to sorting it. Could you maybe also tel me how I can get the links to appear as centered vertically? Setting the Nav menu DIV to flexbox and vertical didn’t see to do the trick …?

Put the links in another div, then make that 100% height and center it.

2021-03-18 12_06_26-Webflow - BedrijfsOntzorging.nl

Okay … this looks perfect @Fonsume … I have one more question if you would be so kind … Is it possible to change the Hamburger menu icon into an X for when the menu is opened?

Sure, you’d need to either add a lottie file animation and play it back on click or add an X icon and swap it out using interactions.