Archived topic
Individual breakpoint for mobile menu not working after 2.0 update
3 replies · Started by Sebastian on December 13, 2017
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?
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 :)
Thanks Tom!
It works perfect.
Have a nice christmas time.
Thanks, you too! :)