Mobile issues: page not scrolling, hamburger menu not working

Design help General
1

Hi all, this is my first post here. I’ve managed to put together my own webflow site despite not being a professional web designer. I’m really stumped about my website’s behavior on mobile. The hamburger menu at the top isn’t working (nothing happens when I click on it) and I can’t scroll! I’m pretty sure this used to work, so I have no idea what I’ve done to mess it up. Help!

Here is my site Read-Only: Webflow - Sandbox Studio

The live website is at https://www.sandboxlandstudio.com/

2

Hi Renee,

There are a few things causing these issues.

  1. Remove the combo class skeuo-button from your nav links. It is setting their position to absolute. Instead, just style the ‘navlink2’ class directly.
  2. A lot of your elements are set to ‘overflow: hidden’, such as your nav menu, your containers, and your navbar. They will need to be set to ‘overflow: visible’. This is found in the ‘size’ section of the styles panel.
  3. You have applied custom positioning to the nav menu which is not necessary. On the nav menu, go to position, and option-click on the position. This will reset it to the default.

Let me know if these changes help, and I can take another look if it’s still not working :)

3

Thanks so much for helping! I tried the steps you suggested (notes below) and the problem seems to persist on mobile? Now when I click on the hamburger menu it disappears (progress?) but no menu pops up. I still can’t scroll either.

  1. I couldn’t figure out how to remove the combo class skeuo-button from the home page link, so I deleted it and copied over one of the other navlinks. This seems to have worked, except now when I go to a page that’s not the home page, the home page link is turning orange along with the current page link. Weird.
  2. I’ve changed the overflow to visible everywhere I could see, thanks.
  3. I’m not sure that option-clicking the nav menu changed anything? I did option-click the entire sticky nav, which seems to have reset that. I also went through and reset a bunch of other styles that didn’t need to be different.
4

No problem!

For point 3 I meant option-clicking the ‘position’, which you’ll see below. It should go from blue back to the default. You might need to do this both on the closed and open states of your nav, and on multiple breakpoints.

Also, the reason that it is disappearing on mobile is that your navigation component is inside a Section, which is set to overflow hidden on mobile. You can take the navigation component out of the section and delete the section, your nav doesn’t need to be in one.

I think this should make it appear normally on every breakpoint. The styling of the links has been lost because of the removal of the skeuo-button combo class, so I’d suggest just styling the navlink2 class directly rather than using the skeuo-button class - it seemed to be overriding some things and causing issues.

Let me know if this helps

Screenshot 2024-05-07 at 09.44.24
Screenshot 2024-05-07 at 09.44.241794×1414 129 KB

5

Thanks! Sounds good, I’ll try this today. I honestly don’t care too much about the button styling, so long as it works.
I couldn’t see that the nav menu position was highlighted in blue, but I’ll check again on closed and open and multiple breakpoints. Hopefully this will resolve the issue! I could have sworn I went through and changed overflow to visible but I guess I missed some breakpoints as well.

6

Thank you!! I finally had a chance to work on this and now the menu is now working. Amazing. And I got the scroll to work partially too, although it doesn’t scroll past the first slider.
Remaining issues:

  1. Home page only scrolls down to first slider, then stops.
  2. I screwed up the slider, now it is messed up! When you drag your finger to the left to scroll in mobile, the whole screen moves over. Should I just re-insert new sliders and add all of my images again or is there an easy fix?
  3. Tried to center align items in nav menu and for some reason the home link is staying to the right. Does this have to do with the fact that it’s current? I can’t find a selector for current in order to edit it.