AMP and off-canvas menu

Hi there,

you can't use the Off Canvas panel as it requires Javascript which AMP won't run ( AMP only runs ITS proprietary JS ).

Hi David,

I mean the menu items that are set to the "off-canvas" menu position.
The way the menu is displayed on AMP pages with the plugin is perfect.

See the following screenshot for a quick visual explanation: https://www.dropbox.com/s/6fya3voaaj93vrb/Screenshot%202022-04-18%20at%2014.33.15.png?dl=0
What I'm looking for is displaying the mobile menu items from the non-AMP pages in the mobile AMP pages instead of the "primary menu", which makes more sense.

Hmmm.... not sure but you could try this snippet to load a different menu in the primary nav on amp pages:

add_filter( 'wp_nav_menu_args', 'db_switch_menus' );

function db_switch_menus( $args ) {
    if( 'primary' === $args['theme_location'] && function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) { 
        $args['menu'] = '99'; 
    }
    return $args;
}

the 99 is the Menu ID, you need to change that accordingly.

That works properly on small mobile screens.
However, that is messing with the primary menu on wider screens if a tablet is loading the AMP version (showing the off-canvas menu items in the primary menu location) :/

Theres no way to conditionally load the menus based on screen size.
The only thing i can suggest is to give those additional menu items a CSS Class, and use that class to hide them on the problem screen size.

Could be a working workaround. I'll give this a try :)

Alternatively, is there a way to expand both the primary and secondary menu in AMP when the toggle button is clicked?
That would solve the issue since the off-canvas menu is basically all the items from the primary + secondary menu.

Alternatively, is there a way to expand both the primary and secondary menu in AMP when the toggle button is clicked?

I doubt it, that kinda thing sounds like its gonna require JS which AMP won't allow.

I notice on Desktop you're using then primary nav to display social icons, cart and login.
You could probably build that without the Primary Navigation, and just use some Block elements to hook that into the header. Ying provides a shortcode here for adding the cart anywhere you want:

https://generatepress.com/forums/topic/login-search-cart-icons-in-the-header-for-desktop/#post-2121742

That would leave you with just the Primary Navigation and Off Canvas panel to work with....

Something to think about.