Nav Bar troubles

Design help General
1

I keep having frustrations with the NavBar. Every time I use it I seem to run into similar problems - is it just me.

I create the Nav, style it and position everything so it’s all working at every screen size etc
Then I hit preview and what I get is very different from the design view.

See screen grabs, you can see how the menu that appears is clipped at the bottom when in preview mode (the last menu entry is missing completely) and on the smallest size it is also clipped at the top.

See preview here: https://webflow.com/design/laura-test?preview=d4cf936b4b259340c6b0c039aea40fe0

This is how it is set up to look:

324×557 51.8 KB

And this is the result at various sizes. All the buttons in the menu seem to have increased in depth but the overall container does not.

383×593 101 KB

458×642 97 KB

282×568 40.7 KB

Any ideas anyone…?

2

That’s really weird. It seems like this is the problem:

<div class="w-nav-overlay" data-wf-ignore="" style="display: block; height: 323px;">

But the funny thing is if you click on the menu really fast (double click it) it will show up correctly. Seems like a bug. @danro have any ideas what’s causing these weird issues?

3

Hi @PixelAce, sorry to see the Navbar is giving you these troubles.

It looks like the problem has something to do with the main-navigation class on the nav container element. If you remove this class, the cropping will cease.

And as for the top getting cut off, it looks like this has something to do with your negative margins in the header, but I can’t quite pinpoint it.

I suggest trying the following steps to reset some of the styles for your menu, and hopefully it gets you on the right track:

  1. Drag in a new Navbar into the headerWrap.
  2. Copy your current NavBlock into the new Navbar’s Menu element.
  3. Apply new styles, but avoid the previous names… as there was definitely a problem with some margins in the previous styles.

Hope that helps, let us know how it goes!
-Dan

4

Another note: Looks like Line Height was to blame for the main-navigation cropping issue. Will look further into this so that we can avoid it in the future. Thanks!

5

Hi Dan
Thanks for that, the Line Height was the main issue. The only thing I can’t figure out is why the top of the menu is being clipped at the smallest size - all others are OK.
I will try again with new styles - I have not done that yet, so there probably is a margin/padding issue somewhere.
T

6

I just thought others may find my findings useful and save them from suffering a similar issue.
I have resolved the NavBar issues, following Dans tips, the line height solved the menu being truncated but didn’t solve the odd clipping at the top and the bottom.
Following his suggestion I rebuilt it. The problem was the fact that I was adding margin to the top and bottom of the NavBar itself to get its positioning correct on the page at any one of the screen sizes, but that screwed up the drop down. I put the NavBar in a wrapper and applied the margin to that, and all began to play nicely.