Menu icon Foundation
My nav-top is two layers when making windows smaller

Hi,

I have this strange problem that I can't seem to solve. My navbar looks like this

26 12 2013 23 32 59

That's the way I want it to be. However, when I make the window smaller, the elements in the navbar overlaps a tiny bit.

26 12 2013 23 35 23

Is there a workaround for this? I tried changing the media query, but then I couldn't click the menu link.

Is there a workaround for this? I tried changing the media query, but then I couldn't click the menu link.

media queriesnav-topnavbaroverlaps

Hi,

I have this strange problem that I can't seem to solve. My navbar looks like this

26 12 2013 23 32 59

That's the way I want it to be. However, when I make the window smaller, the elements in the navbar overlaps a tiny bit.

26 12 2013 23 35 23

Is there a workaround for this? I tried changing the media query, but then I couldn't click the menu link.

Is there a workaround for this? I tried changing the media query, but then I couldn't click the menu link.

Dennis Midjord almost 4 years ago

Anyone?

Jay Thatcher over 3 years ago

This is a problem I'm running into site after site. It's discouraging this question hasn't been answered. I asked a similar question recently with little response and no solution. I'm Dennis would like to know how he could at least get this to go to the mobile menu instead of break into two lines. What do we need to adjust in the CSS?

Adam Stewart over 3 years ago

+1
I am also experiencing this issue when in landscape mode on mobile.

There must be away to keep the mobile menu when in landscape view..

Wing-Hou Chan over 3 years ago

Howdy everyone!

The problem occurs as the topbar isn't wide enough to accommodate all the links as the viewport has been made smaller.

One solution is to change the topbar breakpoint:

1) Go to _topbar.scss
2) Change Line 72 to the breakpoint you want
3) Change Line 73 to min-width: breakpoint defined in Line 72 + 1

The above should work, if you experience problems post again!

A CSS solution will be very difficult to find.