AMP responsive menu desktop

Hi All,

I’m working on migrating an existing site to AMP. Firstly I’ve done a fair few of these and I’m loving how this plugin has progressed.

However on my latest site I have an issue with the menu when viewed on the desktop using the ?amp query in transitional mode.

The existing code uses foundation and it uses brettsmason Walker_Nav_Menu to create the unordered list used for the menu.

I use is_amp_request and isset($_GET[amp_get_slug()) to determine if the page is amp and if it is I manually add the accordian menu class. This works great on mobile versions of the page and the default non amp behaviour remains the same. When I view an AMP page on desktop however the class is still added (as obviously the page is amp and still has the ?amp query).

SO how can I now add an additional test in my if statement that can determine if the page is being viewed in dewsktop mode (width is over 768px) I would normally use some javascript to say put the width into a cookie but with the restictions on AMP this is not an option so ultimately what my question biols down to is does this amp plugin have a helper function or amp compaitible script that can feed the width into something i can test to determine if i manually add the accordian-menu class.

This is what i have in function that calls the Walker:

function joints_top_nav() {
    $menuClass = 'medium-horizontal menu';
    if (
        function_exists('amp_is_request') &&
        amp_is_request() &&
        isset( $_GET[ amp_get_slug() ] )
    ) {
        $menuClass .= ' accordion-menu';
    }
	return wp_nav_menu(array(
	    'echo'              => false,
		'container'			=> false,						// Remove nav container
		'menu_id'			=> 'main-nav',					// Adding custom nav id
		'menu_class'		=> $menuClass,	// Adding custom nav class
		'items_wrap'		=> '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',
		'theme_location'	=> 'main-nav',					// Where it's located in the theme
		'depth'				=> 5,							// Limit the depth of the nav
		'fallback_cb'		=> false,						// Fallback function (see below)
		'walker'			=> new Topbar_Menu_Walker()
	));
}

In my functions I have added a generic theme support function:

add_theme_support(
    'amp',
    array(
        'nav_menu_toggle' => array(
            'nav_container_id' => 'top-bar-menu', // The menu
            'nav_container_toggle_class' => 'show-menu',
            'menu_button_id' => 'responsive-menu-toggle', // The button
            'menu_button_toggle_class' => 'is-active',
        ),
        'paired' => true,
    )
);

If no such function exists with AMP is it something that would be considered for the future? And also what would you guys suggest for this kind of scenario? I realise I could double the code and have a desktop and a mobile menu but I’d sooner keep the original code as it is as much as I can in line with it’s original responsive functionality.

I also have the issue reported on here with submenu’s not working. In my case the items are not shown but I can live with that to a poont.

thanks

• This topic was modified 3 years, 8 months ago by craigstanfield.