[Resolved] Problem with sticky navigation

[Daniel]

Hi,

i’m building a site that was designed by a graphic designer – which involves quite some customization.

I’ve set the sticky navigation to switch to the menu toggle at 1130px.

This messes up my menu items.

After hours of searching i connot find the error. Could you kindly have a look and guide me in the right direction?

Thanks a lot,
Daniel

[Leo]

Hi there,

Can you explain a bit more about the actual issue?

I don’t see the menu items being “messed up”.
https://www.screencast.com/t/ybjCUtGst

One thing you can do to narrow down the problem is to temporarily comment out/remove your custom CSS then slowly add them back in to see which one is causing the problem.

Let me know 🙂

[Daniel]

Hi Leo,

thanks for your answer.

Please narrow down the page to 1130px and click on the menu toggle.

I cannot find the reason why the menu-items are messed up here.

Also se this this screenshot: https://www.dropbox.com/s/ioeji7qwhn05tyu/Screenshot%202018-12-11%2019.36.57.png?dl=0

Thanks again,
Daniel

[Leo]

Again what exactly do you mean it’s “messed up”?

Like the empty space you are showing in the screenshot?

Looks like it’s coming from this CSS:

@media (max-width: 1130px) {
    #menu-hauptmenu a {
        height: 18px;
        display: block;
        margin-top: 0px;
    }
}

Have you tried my suggestion of temprarily removing the CSS to see which one is causing the problem?

[Daniel]

Sorry, i’ll try to be more clear: (and yes, i have tried to temporarily remove all css and add it back in)

Below 1130px the last menu-item is outside of the dropdown area (see my screenshot)
The last menu-items are on top of each other.

When i’m in dev-tools and i hover below the logo, it seems there are 2 invisible menu-items (again – see my screenshot)

I could not find the reason for this behaviour. Removing the css you mentioned did not change much.

Thanks again,
Daniel

[Leo]

Can you temprarily remove this CSS you’ve added?
https://www.screencast.com/t/0lQX5Qdvib3

#menu-hauptmenu {

	}

#menu-hauptmenu  a {
	display: block;
margin-bottom: 10px;	
}

.menu-toggle {
		padding: 15px;
	}
	
	.video-icon {
		margin-left: 0;
	}	

.menu-item {
	margin-top: 0px;
	border-right: none;
}

#menu-hauptmenu  a {

}

So the only CSS should be this:
https://docs.generatepress.com/article/mobile-navigation/

[Daniel]

I did and it looks like this:

https://www.dropbox.com/s/b3gznewrxd1xkeg/Screenshot%202018-12-12%2008.37.54.png?dl=0

How can i make the meight of the menu-items smaller?

Adjusting it under “Sticky Menu” “Menu Item Height” did not change anything.

[Daniel]

I think i found the issue:

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .mobile-bar-items a {
line-height: 23px;
}

I added this css. Before the line-height was way to high. This came from some setting inside the customizer. (not sure which one)

[Daniel]

I will mark this as solved, thank you for your help! 🙂

[Leo]

Glad you found the issue 🙂

[Author]

Posts