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.
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/
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):
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:
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.
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?
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.