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.
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:
.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:
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:
Let me know if there was something else you’re noticing any I’ll take another look at things
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
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?
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:
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
It worked! Thank you much!