Nav Bar Going Off Page. Help

Hello. Video with audio to help describe my problem. I hope someone can help! Thank you :slight_smile:


Here is my site Read-Only: https://preview.webflow.com/preview/bare-essentials-627d97?utm_medium=preview_link&utm_source=designer&utm_content=bare-essentials-627d97&preview=df5d8be4e707953166ad20bc223738dc&mode=preview

Hi Matthew @DroneMotionUK

The thing with your navlinks is that you’re kind of giving them an explicit size with the font size, so on smaller windows, they won’t just fit by themself unless you tell them to.

You could use wrap on your flex settings, so if the screen gets smaller, they wrap like below.

Or you can use VW units for your font size 1.1VW so here, the font will resize based on the width of the window. You could even use this measurement for the padding, so if the viewport get’s smaller, the padding reduces slightly to accomodate.

CleanShot 2021-05-18 at 13.56.14

Either way, setting too many explicit sizes can result in un-responsive designs. Personally, i’d say the link text is too big. 16px works well, and it still readable to most. Here’s a useful article on CSS units.

If you’re worried about readability being affected, the colour of your text will have much more of an impact than the font size, currently that colour setup fails for accessibility.

Hope that helps.

Thank you so much @magicmark. That truly was magic :slight_smile:

How would it be possible to keep the nav bar options spread out like this? I can’t seem to make it go all the way to the left and to the right, it’s even set to 100vh and not constrained by a container. Thank you.

You can use the flex settings on the NavBar to space it all of it’s children, is this the kind of thing you mean?
CleanShot 2021-05-18 at 17.14.45

@magicmark amazing!! Pure magic once again - It’s funny how I spent a good hour or so trying to do that and you know off by heart it’s amazing. Thank you so much.

1 Like