Add secondary menu to off canvas menu

Hi there,

not easily, is the off canvas only on mobile ?

Hi David,

Yes, the off canvas menu is only on mobile.

As an alternative method is there a way to remove the secondary menu on mobile and add a button to the off canvas menu?

Charles

Hi Charles,

Try this PHP snippet to remove the secondary nav on mobile:

add_filter( 'has_nav_menu', 'tu_disable_secondary_nav_on_mobile', 10, 2 );
function tu_disable_secondary_nav_on_mobile( $has_nav_menu, $location ) {
    if ( 'secondary' === $location && wp_is_mobile() ) {
        return false;
    }

    return $has_nav_menu;
}

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

add a button to the off canvas menu?

What's the purpose of the button？How it should be working?

Hi there,

I've added the above code via the Code Snippets plugin but I can't see that it's worked.

I want to add a 'Get In Touch' link on the off canvas menu.

Charles

I’ve added the above code via the Code Snippets plugin but I can’t see that it’s worked.

Have you checked on your phone? wp_is_mobile() works on the initial load, it will not work just by narrow down the browser window.

And make sure the cache is cleared.

I want to add a ‘Get In Touch’ link on the off canvas menu.

You can use a block element - hook to insert this link, choose inside_slideout_navigation hook.

Hi,

Is it quite difficult to add the secondary nav in to the off canvas menu before the primary nav? This would be the best solution if it was possible?

Charles

Is it quite difficult to add the secondary nav in to the off canvas menu before the primary nav?

The easiest way is to create a new menu with both secondary nav and primary nav's menu items, then assign it to the off canvas menu.

Brilliant, I'll do that.

Thank you

Is the best way to turn off the secondary nav on mobile to use the PHP above?

Charles

You can use the PHP function that Ying provided.
But in addition you can add some CSS:

@media(max-width: 768px) {
    #secondary-navigation {
        display: none;
    }
}

This will make sure the element is at least hidden if the wp_is_mobile doesn't work

Great, thanks David.

How is it possible to increase the logo size on mobile? I'm using navigation as a header but don't want to increase the menu item height.

Charles

Try this CSS:

@media(max-width: 1024px) {
    #mobile-header .site-logo.mobile-header-logo img {
        padding: 0;
        height: 25px;
    }
}

Great, that worked.

Removing the secondary menu has left a white space where it was sitting. Is there a way to remove this?

Charles

Can i see the site ?