Streaming live at 10am (PST)

Tablet/Mobile Nav Dropdown Not Working Properly


#1

Hello! I'm running into an issue where my tablet/mobile nav looks fine in edit mode but is being clipped off at the top when I preview.

When I'm editing, it the drop dropdown sits on top of the nav bar, which is what I want.

When I move into preview mode, the top part of the drop down is "missing"

It looks like the nav bar is applying some sort of "clipping mask" to the nav dropdown that is rendering it at 0 opacity but that makes no sense to me.

Here's the link so you can see how things are setup inside webflow: https://preview.webflow.com/preview/evanjafrica?preview=7490fbc37cf91e775368c3bae5639ae4

There are a number of other problems I'm encountering with the tablet/mobile nav, (Items weirdly moving on hover, elements not stretching the full width of the dropdown, etc.), but most of those I attribute to being sleep deprived and staring at my screen for too long. The issue I mentioned above seems like it might be a glitch though.

Any help would be greatly appreciated!

Thank you!


#2

Another random glitch, when I scale the browser width back up to the desktop view after having it at a tablet width, the nav inexplicably moves down out of the nav bar. It's fine when I start with the browser at desktop width. So weird!


#3

Hi @ryanjames - the Navbar widget is a pre-built navigation to make things easier for people to design with and naturally has some limitations. Instead, try to build a custom navigation menu.

This demo shows something very similar, only sliding over from the side instead of the top:

Demo: https://webflow.com/website/Demo-Kit
Page Title: Slide Over Navigation

Hope this helps! smile


#4

Thanks for the input @thewonglv! I spent a little bit of time rebuilding the nav. I ended up using a custom desktop version and a modified nav widget for tablet/mobile. Nearly everything seems to be working properly except that I'm getting a weird bug now with the tablet/mobile nav.

Here's the before publishing and after publishing screenshots:

Before

After

Any ideas what's causing the weird wrapping? Thanks!


#5

Nevermind. I figured it out. Thanks anyway!


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.