2x higher menu after resizing the browser window (Chrome)

I think it has to do with menu “stepdown”, but since you’re only floating the last two list items it only steps down on the last two items.

this article explains what’s happening: Prevent Menu Stepdown

Putting display: inline on the list items, and float: left on the anchor tags seems to allow it to shrink and expand while maintaining an even height in Chrome.

#nav-header .nav>li {
  display: inline;
}

.nav li a {
  float: left;
}

@cthesmith – nice find; thanks for sharing.

I edited the code and added it to my css like this:

@media only screen and (min-width: 960px) {
	#nav-header .nav>li {
		display: inline;
	}

	#nav-header .nav li a {
		float: left;
	}
}

and it works fine.

Thanks for help ??

Hi again,

I have another similar problem with my menu.

The header menu on smaller resolutions (up to 959px) is set to float:left, so after clicking the toggle button the menu is displayed horizontally.

But if I resize the window from let’s say 320 px (when the menu is visible in two rows) to a bigger resolution, the second row is still visible. Or when I load my website on a smartphone in portrait position and then rotate it to landscape position – same effect.

Hi Jack. Ran a couple of tests on your site but don’t think I’m seeing what you’re describing. On my desktop, using Chrome, I collapsed the browser width down to 320px. At that point, when I clicked the menu toggle, it displayed one row of 4 and 1 row of 2. As I expanded the browser out, at 430px one menu item moved to the top row so now it was 5 + 1. At 530px the entire menu was on one line, and stayed there as I expanded the browser window. Also ran a test at https://responsivetest.net/ on different devices, portrait and landscape, and got the same results. Then I loaded up your site using Safari on an iPhone 4 (yes, it actually still works…;-) In portrait mode the menu displayed two rows, 4 + 2. When I rotated it to landscape it was still two rows but changed to 5 + 1; back to portrait and back to 4 + 2.

Maybe this image will help ?? https://imgur.com/cEgjnup

Don’t know what to say. These screenshots are what I see in my browser at 320px, 430px, 530px and 945px.

Take a look at your 3rd screenshot (530px) – there is an unnecessary second bar below the menu. I’m trying to get rid of it so it wouldn’t show up without refreshing the page.

It looks the height is being set on “.nav-wrap” by javascript when you click the menu icon. It toggles from 0px to hide the menu to 35px for one line, or 70px for two lines, depending on how narrow the browser is when you click the icon. When you click the icon at a very narrow size it sets the height attribute to 70px, then when you expand the screen the height stays at 70px until you click the button again. The same thing happens in reverse, with items falling into two lines while “.nav-wrap” stays set at a 30px height.

Putting “height: auto” on “.nav-wrap” seems to let it expand or collapse with the menu items.

You might try this in your stylesheet:

.nav-wrap .expand {
  height: auto !important;
}

I’m not sure if that will help, or if it will just get overridden.

Ok, got it. The css looks like this:

.nav-wrap.container.transition.expand {
	height: auto !important;
}

It makes both menus (one is presented inline, the other is a fixed drop down menu) adjust to changes in browser window size in real time.

It doesn’t seem to work on my smartphone (when changing position from portrait to landscape and the other way) so I changed it to something like that:

@media only screen and (max-width: 959px ) {
	.nav-wrap.container.transition.expand {
		height: auto !important;
	}
}

And now it works fine on any device or screen.

Thanks for your help ??