[Resolved] [Feature request] Custom header element mobile menu breakpoint

[George]

Since on a header element we sometimes tend to change navigation logos and color to fit with the design, wouldn’t it be great for an option to existing to change the navigation mobile menu breakpoint conditionally?

Anyway, is there an easy way to modify the navigation mobile menu breakpoint for category archives? I am using a narrower version of the logo and would like to reduce the breakpoint number.

[Leo]

Hi George,

Would this filter with the conditional tags work for you?
https://docs.generatepress.com/article/generate_mobile_menu_media_query/

https://codex.wordpress.org/Conditional_Tags#A_Category_Page

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[George]

It’s a thing of beauty, Leo, thanks so much!

Here is the code:

add_filter( 'generate_mobile_menu_media_query', function() {
	if ( is_category() ) {
		return '(max-width: 860px)';
	} else {
		return '(max-width: 1000px)';
	}
		
} );

Seems like the filter takes over from any existing mobile breakpoint settings from the Customizer so it needed an else statement.

[Leo]

You could try this without the else statement:

add_filter( 'generate_mobile_menu_media_query', function( $width ) {
    if ( is_category() ) {
        $width = '(max-width: 860px)';
    }
    return $width;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[George]

That’s very cool, Leo. Would I need to adjust the not mobile media query as well as mentioned in the article? How would I do that? My current code is:

add_filter( 'generate_mobile_menu_media_query', function( $width ) {
	$slug = basename(get_permalink());
    if ( is_category() || $slug == "news" ) {
        $width = '(max-width: 860px)';
    }
    return $width;
} );

[Leo]

Should be very similar like this:

add_filter( 'generate_not_mobile_menu_media_query', function( $width ) {
    if ( is_category() ) {
        $width = '(min-width: 861px)';
    }
    return $width;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[George]

Perfect, thanks Leo!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts