[Resolved] Individual breakpoint for mobile menu not working after 2.0 update

[Sebastian]

Hi,

I have a problem with the following code for customizing the breakpoint for the responsive/mobile menu.

@media (max-width: 1060px) {
	.site-header .inside-header {
        text-align: center;}

	.main-navigation .menu-toggle {
		display: block;
	}
	
	.main-navigation ul {
		display: none;
	}
	
	.main-navigation.toggled .main-nav > ul {
		display: block;
	}
	
	.main-navigation .main-nav ul ul {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.main-navigation .main-nav .sf-menu > li {
		float: none;
		clear: both;
		display: block !important;
		text-align: left !important;
	}
	
	.main-navigation .sub-menu.toggled-on,
	.main-navigation .children.toggled-on {
		display: block !important;
		opacity: 1 !important;
	}
	
	.main-navigation .dropdown-menu-toggle:before {
		content: "\f107" !important;
	}
	
	.main-navigation .sfHover > a .dropdown-menu-toggle:before {
		content: "\f106" !important;
	}
	
	.main-navigation .menu-item-has-children .dropdown-menu-toggle {
		float: right;
	}
	
	.main-navigation .mobile-bar-items {
		display: block;
	}
	
	.main-navigation .menu li.search-item {
		display: none !important;
	}
	
	.main-navigation .sf-menu > li.menu-item-float-right {
		float: none !important;
		display: inline-block;
	}
	
	[class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}
}

The problem is, that the space which the drop-downs will need is already shown as whitespace when the submenus are closed. The code worked fine with GP 1.4 and I got the code from official support here in the forum.

What needs to be adjusted, so that it will work again?

[Tom]

Hi there,

Thanks for reporting this! Can you try the updated code?: https://docs.generatepress.com/article/mobile-navigation/

GP 2.1 which feature a new filter to choose when the mobile menu displays 🙂

[Sebastian]

Thanks Tom!

It works perfect.

Have a nice christmas time.

[Tom]

Thanks, you too! 🙂

[Author]

Posts