Issues with horizontal scrollbar

Design help General
1

Hi

I’ve almost finished designing my very first website, things have been going smoothly apart from a few issues. I have three layout issues that I can’t seem to resolve:

  • A horizontal scrollbar which affects the homepage. Causing the site to rescale irreversibly on the mobile portrait breakpoint.
  • The full-screen menu on the mobile portrait doesn’t take up the whole viewport height, so the background is still visible.
  • My menu button disappears on the CMS blog post pages once the menu is open, making it impossible to close the menu.

Please help!

ScreenShots

  1. image
    image1366×768 321 KB

  2. image0
    image01242×2208 150 KB

  3. image
    image1366×768 268 KB

Here is my site Read-Only: https://preview.webflow.com/preview/aarons-first-project-5b731c?utm_medium=preview_link&utm_source=dashboard&utm_content=aarons-first-project-5b731c&preview=91214799437448abca2cd185627a1d0c&mode=preview

Here is the published site subdomain: https://aarons-first-project-5b731c.webflow.io/

2

Hi Aaron,

The horizontal scrollbar is caused by overflowing content within your slider.

Simple fix for that is to set the Overflow to Hidden for the element Mask 2 (please note however that I’ve not spent time going through your homepage to see if that has a knock-on effect for any animations etc you may have):

image

I can’t seem to replicate your issue with the menu not stretching to 100vh on mobile - it seems to behave just fine in the Designer I’m afraid.

Maybe it’s because I’ve not had a coffee yet today, but I can’t get to the bottom of your disappearing icon problem. I can see you’ve ramped up the Z-Index to try and fix it! Potential fix (although not the one you are after) is to set TISSUES - menu wrapper to Absolute with a top margin of 80px - this then positions the menu below the navbar and therefore means it doesn’t affect visibility of your icon. This gives the following result:

image
image481×557 20.2 KB

I also set the Justify of menu item wrapper to Start with a top padding of 50px. Appreciate this wasn’t the solution you were after, but if all else fails it still gives you a functional menu overlay.

3

Hi Andy,

Thank you so much - you’re a lifesaver! I can’t believe it was something so simple as the Mask 2 element.

If I implement your workaround, would I need to change the opacity of the navbar, so that I have one solid color?

Thanks

4

You’re welcome!

Yes I would recommend ensuring that the opacity/colour of your navbar and menu are the same as each other - it will look much better and more like an overall overlay.