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.

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&mode=preview


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!

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.

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&mode=preview

Also what’s the best way to design the boxes without it changing dimensions on different breakpoints?

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&pageId=5f9b3571910160da7d733c20&mode=preview

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:

image

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.

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&mode=preview

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.

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&mode=preview

Mike,

I copied a section from a template and its not showing up when I publish. Please advise.

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&pageId=5f9b3571910160da7d733c20&mode=preview

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?

the intro boxes aren’t showing up when I publish

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&pageId=5f9b35719101604f3a733c1e&mode=preview