Sticky Header issue – Mobile Menu

Hi there

I have an issue with the Sticky Header. When the Browser is bellow 1253px (between 1253px and 991px) the menu drops to a second line because there isn’t enough room to fit all in one line. This makes for a very tall and messy sticky header. Please see attached screenshot.

The Mobile Menu seems to be enabled at 991px breakpoint, so I thought perhaps the solution would be to make the Mobile Menu appear sooner, just at the 1253px breakpoint.

Do you think that’s the proper solution? If so, can you help me achieve that?
I don’t see anywhere where I can chnage the breakpoint for the Mobile menu.

Thanks very much.

Sorry, screenshot attached

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

@media (max-width: 1280px) {
.website-wrapper .right-column .mobile-nav-icon {
	display: inline-block;
}
	
.website-wrapper .sticky-header .main-nav,
.website-wrapper .navigation-wrap	{
		display: none;
}

.website-wrapper .sticky-header > .container {
   min-height: 60px;
}

.website-wrapper .search-button {
	display: none;
}

body.document-ready .mobile-nav {
	display: inline-block;
}
}

Regards

Hi
This is perfect – Thank you very much!

You are welcome!

[Author]

Posts