Streaming live at 10am (PST)

Nav menu on mobile is janky

Of course it looks fine on desktop but the dropdown menu items shift on mobile. Just started using webflow, so I’m not quite proficient yet to troubleshoot. Please help.


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

Welcome to the community @AddyPapa!

Can you provide a bit more information on what’s being shifted on mobile? I don’t actually see any dropdown when clicking the hamburger icon, however I do notice that you’re icon is overflowing a bit:

image

Since your .container-3 element is set to a fixed value, it won’t respond to size changes like it would with something dynamic (like percentage)—meaning it will overflow on screens below 320px wide:

image

Additionally, your menu icon has a negative right margin that’s pushing it up against the right edge of the screen, so I’d recommend removing this style:

image

Let me know if there was something else you’re noticing any I’ll take another look at things :+1:

If you scroll down the page a bit on mobile, then you’ll see the dropdown menu.

I’ll try your suggestions. Thanks!

Ah okay, thanks for the update—I totally missed it all the way down there!

The issue here is that the .nav-menu element is set to position: absolute however the parent element (.container-3) is set to position: static. In order for absolutely positioned elements to align themselves relative to the parent element, the parent element needs to be set to position: relative:

image

Sorry, I’m very much a novice. What do the settings need to be so that the nav menu will position where it’s supposed to be?

Also how do you lock the design on mobile so that the user can’t slide it off screen.

No worries, the style you’re going to want to change is on .container-3 (the first child of your .navbar-2 element) under the position section. It’s worth noting that you’ll want to make this adjustment at the tablet breakpoint as this is where you’ve enabled the mobile menu:

image

image

In terms of the overflow, this looks to be caused by a few areas that have set pixel widths (like the paragraph element under the “What sets us apart” section) and the slider under the “Our services” section which appears to have the overflow set to visible on the .card-slider-mask element:

image

It worked! Thank you much!