Streaming live at 10am (PST)

Adding new link changes NAV BAR position


#1

I want to add another link to my NAV BAR, but when I do, the entire bar shifts down underneath the logo. I have tried changing the alignment on each element and adjusting the width, margins, etc. I’m sure it’s a simple fix. I’m just not catching this one.

Thanks.


Here is my site Read-Only: https://preview.webflow.com/preview/bakal-dermatology?preview=8c8ab74f2f20533d7706af42d09f6ce0
(how to share your site Read-Only link)


#2

The nav element becomes too large for its parent, as you’ve set 250px margins to it
It goes under because it doesn’t have room to grow.


#3

I have changed those margins to 0px and it still bumps it down.

Any other suggestions?


#4

I also just tried popping in a fresh container and leaving the margins/settings at AUTO. The problem of adding a new nav link still exists. Even when I remove all padding from the nav links themselves. There should be plenty of room for a 4-letter button. But alas, it still gets bumped down under the logo.


#5

That many items fit but you’ll understand that the only room left is what I underlined in red, so adding any other item will make the whole line incapable of fitting in the space left after the logo is shown.

Any extra item added makes the nav element too wide for the space between the logo and the right side of the container, so in order to expand, it has to follow the flow of elements, or “skip to the next line”


#6

If you want to fit more items on that line, you can alter the text size, letter space, padding and margins of the menu items in order to make them smaller.


#7

Thank you Vincent. I had thought of trying your suggestion, but then remembered that the site caters to a lot of elderly folks with poor eye sight - so making the font much smaller would add a different problem.
I applied the same suggestion, however, to the logo size, spacing, position and at first it seemed to work, (at least in the desktop view), but then the mobile views weren’t right – the nav links got cut off because, like you said, there are too many for the space.

I really appreciate your help. I’m going to keep playing around with the fonts, I guess and see if I can make something work. THANKS AGAIN for speedy replies :o)


#8

Haha. What happens to you is normal. With Webflow or not, the Primary menu is a sensible and difficult part of a design. One of the most important too. So many questions to begin with… Should it be visible, should it hide behind a hamburger icon on mobile, should it make a semantical sense, like a phrase, should it be organized with a visual hierarchy? And so on…

Designing it for your target (here elderly) is the thing to do.

Webflow comes with a default structure that acomodates for the most often seen number of links. It’s easily adaptable to your needs.

If you find exactly what you need and show it to me in a way or another (mockup image, draft…) I’ll be happy to help you build the appropriate structure for it :slight_smile:


#9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.