I am finishing up my first ever site, and am running into an issue where when my menu slides out on a more narrow display, the background of the menu will resize properly but the text will stay static and start to go off the screen.
This is a bit of an extreme example but hopefully you understand what I’m trying to say.
I feel like this shouldn’t be that hard of a fix, but since I’m new I don’t know what that fix is.
Thank you in advance!
Here is my site Read-Only: https://preview.webflow.com/preview/mattahrens?utm_medium=preview_link&utm_source=designer&utm_content=mattahrens&preview=38a5df7de3cfc55b4160a7f3409a1e0c&mode=preview
Live link: https://www.mattahrens.design
I go through that problem at the start too.
The issue here is that you set background menu height and width with vh and vw, respectively.
That makes the background responsive, but you left the size of the font in px.
So when the page is resized, the background automatically adjust itself, but the text keep the same px (with a larger or smaller page).
To solve this, you can set the size of the font, lets say, to 10 vw.
That way, the text will always adjust too!
Tip: If you use VW or VH, change all the elements inside it (included the margin and padding), to make it responsive.