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:
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:
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 position: relative:
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 .card-slider-mask element:
It worked! Thank you much!
I’m so sorry for being so new at this. The mobile menu doesn’t even work now. And also you’re unable to interact with anything on portrait orientation.
Also what’s the best way to design the boxes without it changing dimensions on different breakpoints?
No need to apologize, I’m happy to help out.
The reason your menu isn’t showing is because your Navbar element is set to overflow: hidden—removing this setting fixes the menu not showing when you click the hamburger icon:
In terms of designing boxes, just make sure you’re using dynamic values (like percentage) instead of static values (like pixels) and set the min/max values to prevent the boxes from getting either too small or too large if necessary.
Which boxes are you having trouble with exactly?
I’ve set the navbar to be visible but to no avail. I can’t even swipe up on mobile…the page seems to have locked in place. I can’t even swipe down to reload the page.
So you’re basically saying everything should be in percentages if I don’t want to have to go into various breakpoints to fix manually.
I’ve set the navbar to be visible but to no avail.
I’m still seeing it set to overflow: hidden, so make sure you’re adjusting the right element—in this case, .navbar-3:
So you’re basically saying everything should be in percentages if I don’t want to have to go into various breakpoints to fix manually.
Correct. Sometimes not including a value (Auto) works as well, but it will depend on your setup. Keep in mind you’ll still want to adjust these for certain breakpoints—like mobile portrait—that require more significant changes due to the small size. A two column layout for example may work great on your middle breakpoints, but more often than not will need to be a single column for mobile devices.
Why are we seeing different views?
Oooh…you’re in mobile breakpoint
Mike,
I’m still unable to scroll up on mobile. Could you please help? Meaning, i’m opening up the published url on my device.
Mike,
I copied a section from a template and its not showing up when I publish. Please advise.
Your site isn’t scrolling because you’ve got overflow: hidden on your body element (set on your tablet breakpoint):
In regards to your other issue, you’re going to need to provide me with some other information—which section isn’t showing up?