Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Individual breakpoint for mobile menu not working after 2.0 update

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #448417
    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?

    GeneratePress 2.0
    GP Premium 1.5.6
    #448882
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #448891
    Sebastian

    Thanks Tom!

    It works perfect.

    Have a nice christmas time.

    #448897
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.