[Resolved] Turn off Secondary Menu on Mobile without relying on css

[David]

How can I turn off Secondary Menu on Mobile without relying on css.

Why?

Because on desktop Google PageSpeed Insights drops my score from 100 to 93 for a Cumulative Layout Shift (CLS) greater than 1. While the mobile version still scores 100.

[Leo]

Hi there,

Can you give this PHP snippet a shot?

add_filter( 'option_generate_secondary_nav_settings', function( $settings ) {
    if ( wp_is_mobile() ) {
        $options['secondary_nav_position_setting'] = '';
    }

    return $settings;
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

[David]

Leo,

I have three distinct menus:

Mobile Menu (using the code below)
Primary Menu
Secondary Menu

Here is the code I am using:

add_action( 'init', function() {
    register_nav_menu( 'mobile-menu', __( 'Mobile Menu' ) );
} );
add_filter( 'generate_mobile_header_theme_location', function() {
    return 'mobile-menu';
} );
add_filter( 'option_generate_secondary_nav_settings', function( $settings ) {
    if ( wp_is_mobile() ) {
        $options['option_generate_secondary_nav_settings'] = '';
    }
    return $settings;
} );

I have 0 for the Cumulative Layout Shift for mobile PageSpeed Insights.
On Mobile I have two menus showing and I only want one.
Hiding using css is not an option.

I have above 1 for the Cumulative Layout Shift for desktop PageSpeed Insights (which is a red flag) whenever I use the css to display:none for secondary nav.

The code above does not remove the secondary nav as hoped.

Is there anything else to try?

Thank you for your time.

Dave

The idea situation to me would be to use php to have

Desktop: Include Primary and secondary menus
Mobile: Include only the mobile menu.

Using css to hide and show menu creates Cumulative Layout Shifts at the top of the webpage which Google marks with a red flag.

[Leo]

Sorry I got the code wrong above.

Can you give it another shot?
https://generatepress.com/forums/topic/turn-off-secondary-menu-on-mobile-without-relying-on-css/#post-1537974

[David]

where is the code?

[Leo]

I edited the original code:
https://generatepress.com/forums/topic/turn-off-secondary-menu-on-mobile-without-relying-on-css/#post-1537974

Here is the filter we are using:
https://docs.generatepress.com/article/option_generate_secondary_nav_settings/#options-%E2%80%98secondary_nav_position_setting%E2%80%99

[David]

I tried this but it doesn’t work

[David]

even if I remove the wp_is_mobile() it doesn’t work

add_filter( ‘option_generate_secondary_nav_settings’, function( $settings ) {
//if ( wp_is_mobile() ) {
$options[‘option_generate_secondary_nav_settings’] = ”;
//}
return $settings;
} );

[Leo]

Strange.

I just tested this one and it works to remove the secondary navigation:

add_filter( 'option_generate_secondary_nav_settings','lh_remove_sec_nav' );
function lh_remove_sec_nav( $options ) {
    $options[ 'secondary_nav_position_setting' ] = '';
    
    return $options;
}

Can you test it on your end?

If so what about this one?

add_filter( 'option_generate_secondary_nav_settings','lh_remove_sec_nav' );
function lh_remove_sec_nav( $options ) {
    if ( wp_is_mobile() ) {
        $options[ 'secondary_nav_position_setting' ] = '';
    }
    return $options;
}

[David]

When I use this code:

add_filter( 'option_generate_secondary_nav_settings','lh_remove_sec_nav' );
function lh_remove_sec_nav( $options ) {
	$options[ 'secondary_nav_position_setting' ] = '';
	return $options;
}

There is no secondary menu. However there is still a lot of extra css associated with the secondary menu. How can I remove that as well?

When I use this code:

add_filter( 'option_generate_secondary_nav_settings','lh_remove_sec_nav' );
function lh_remove_sec_nav( $options ) {
    if ( wp_is_mobile() ) {
        $options[ 'secondary_nav_position_setting' ] = '';
    }
    return $options;
}

The secondary nav is included on BOTH.

I am using code snippets.

[Leo]

Hmm I’m not sure if there is a way to make this work with wp_is_mobile() but have forwarded to Tom and see if he has an idea 🙂

[David]

OK, so I use WP Rocket. There is an option of “Separate cache files for mobile devices”.

Leo, it seems the above code does work, when I am logged in (no caching) but does not work when I view a cached page.

Because I usually leave this option above as unchecked.

Could this be the reason?

[Mathieu]

wp_is_mobile is a terrible idea.

It’s not a good idea to cloak your website to impress Google.

[David]

Mathieu: what do you mean?

[Mathieu]

Well, you don’t want to output a different page for mobile and desktop, it justs confuse the robots.

That’s what CSS&JS is for. Not sure why you don’t want CSS.

[Author]

Posts