Wide menu runs into logo

[HenrikH]

When I have more items on the menu than original, the menu runs into the logo like this when the browser window gets smaller:

I have tried using this css as adviced to another user:

@media (min-width: 768px) and (max-width: 981px) {
	header nav {
		clear: both;
	}

, but it didn’t help.

Is there any way I can direct the wider menu under the logo when the browser window gets smaller?

If I make the window a little bit smaller it will get the mobile menu nicely, it’s just this in-between width that is the problem.

---

[Support]

Hello, please try to add this:

(css/custom.css)

@media (min-width: 991px) {
	#header nav.nav-main {
		float: none;
		clear: both;
	}
	
	body.sticky-menu-active #header {
		top: -66px;
	}
	
	body.sticky-menu-active #header .logo,
	body.sticky-menu-active #header .social-icons {
		display: none;
	}
}

Let me know if you have any questions.

Thanks.

---

[HenrikH]

Thanks for the help, but it didn’t help, the same problem remains.

---

[Support]

Hello, could you please send me the URL so I can check and suggest the better solution?

Thanks.

---

[HenrikH]

This reply has been marked as private.

[Support]

Hello, please add this:

(css/custom.css)

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#header.colored nav ul.nav-main {
		margin-top: 80px;
	}
	
	#header.colored nav ul.nav-main li a {
		padding-top: 8px;
	}
}

Let me know if you have any questions.

Thanks.

---

[HenrikH]

Works well, thank you very much, your support is excellent!

---

[Author]

Posts