Nav link non-responsive

Design help Animations & Interactions
1

Hey
I have a problem with my navbar, when I decrease the size of my screen on computer mode, my nav links are overlapping.
Here is my read-only link for those who want to check it out : https://preview.webflow.com/preview/dolcevita-residence?utm_medium=preview_link&utm_source=designer&utm_content=dolcevita-residence&preview=5f999b44c61f911009d518199075ad3a&mode=preview

Thanks for you answers :smiley:

Here is my public share link: LINK
(how to access public share link)

2

Hey Maxime!

I am not sure what the issue you’re having is? At least on my end, when I open the preview link, I am able to scale my viewport to any size and the nav-links respond as I would expect.

Would you be able to provide a quick video of what is happening? CloudApp is great for doing screencasts like that!

3

Hey Tyler

First of all, thanks for you answer !
I sent you the link of the video, you can see that my nav links are overlapping as I’m decreasing the width of my screen.

https://youtu.be/-VY6D2qJT9c

4

Maxime,

Ah okay, I was thinking of overlapping in a different manner haha

Really the only quick fix for this is to simply reduce the font size of your nav-links. Since Webflow does not currently support custom breakpoints, there isn’t really a way to have it shrink down only at the point that it begins to overlap.

If simply changing the font size doesn’t work, there are always things you can consider from a design perspective. Six nav-links on one menu can get a bit congested in terms of scalability. So maybe you could consider nesting a couple of the links within the drop down.

Another thing to consider would be creating a navigation sidebar vs. having the nav on the top of the screen. With your current design, I see a couple benefits to this:

  1. This would allow you do keep the nav-bar in view at all times, meaning it would be fixed to the side of the page.

  2. You could also have different links highlight based on where the user is at on the page. (Ex. if the user is scrolled to the contact form, the corresponding link on the nav-bar would be highlighted.

Hope these suggestions help! :slight_smile:

5

It has helped a lot!
Thanks Tyler, your advices have been greatly appreciated :smiley:

1 Like