Title: AMP responsive menu desktop Last modified: March 8, 2021 --- # AMP responsive menu desktop * Resolved [craigstanfield](https://wordpress.org/support/users/craigstanfield/) * (@craigstanfield) * [5 years, 3 months ago](https://wordpress.org/support/topic/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' => '', '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 5 years, 3 months ago by [craigstanfield](https://wordpress.org/support/users/craigstanfield/). Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/) * (@milindmore22) * [5 years, 3 months ago](https://wordpress.org/support/topic/amp-responsive-menu-desktop/#post-14150383) * Hello [@craigstanfield](https://wordpress.org/support/users/craigstanfield/) * Thanks for the support topic, can you please share your site’s URL and site health information using [this](https://docs.google.com/forms/d/1JTQmphDlk9YgHpDoFRbHXpkDqv8-QmzTT7MDR4AstyQ/) form. * Also, please share some screenshots using services like [lightshot](https://app.prntscr.com/en/index.html) so we can understand your requirement better. * Thread Starter [craigstanfield](https://wordpress.org/support/users/craigstanfield/) * (@craigstanfield) * [5 years, 3 months ago](https://wordpress.org/support/topic/amp-responsive-menu-desktop/#post-14151204) * Hi Milind, * The non amp live site can be seen @ [https://www.leanuk.org/](https://www.leanuk.org/) I’m trrying to mimic the same behaviour in AMP. In previous posts with earleier versions of this excellent plugin the suggestion has been to consider using things like amp-sidebar or amp-mega-menu but as this is an existing working menu I don’t really know how to get the exact same functinality independent of viewing so I have sub menu’s which expand and contract when clicked/touched. * As explained i have the menu to work by adding a class to the top level ul but I do not know of a way how the class can be removed if the viewport is not a mobile device. Mainly my concern on this is with a view to eventially serving all pages in AMP for all devices! * thanks * Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/) * (@milindmore22) * [5 years, 3 months ago](https://wordpress.org/support/topic/amp-responsive-menu-desktop/#post-14151416) * hello [@craigstanfield](https://wordpress.org/support/users/craigstanfield/) * I will recommend using additional check with [wp_is_mobile](https://developer.wordpress.org/reference/functions/wp_is_mobile/) function * Thread Starter [craigstanfield](https://wordpress.org/support/users/craigstanfield/) * (@craigstanfield) * [5 years, 3 months ago](https://wordpress.org/support/topic/amp-responsive-menu-desktop/#post-14151465) * Hi [@milindmore22](https://wordpress.org/support/users/milindmore22/) , * Thanks for the reply and to confirm that has fixed my issue, sometimes one can’t see the wood for the trees. Just need to work out how to get the submenu side of it to work and this one is ready to go. * thanks again * Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/) * (@milindmore22) * [5 years, 3 months ago](https://wordpress.org/support/topic/amp-responsive-menu-desktop/#post-14151661) * Hello [@craigstanfield](https://wordpress.org/support/users/craigstanfield/) * I will recommend keeping the submenu expended for AMP pages. you can add amp specific styles with `html[amp]` * eg: the style from your current site can be modified as * ``` @media screen and (max-width: 39.99875em) html[amp] .top-bar ul { background-color: #fff; display: block !important; } ``` * Thread Starter [craigstanfield](https://wordpress.org/support/users/craigstanfield/) * (@craigstanfield) * [5 years, 3 months ago](https://wordpress.org/support/topic/amp-responsive-menu-desktop/#post-14155245) * Hi Milind, * Ok thats good but my client is expecting the same behaviour :-s. I’ve been extending the walker nav function and it is coming on well Thanks again for the support - This reply was modified 5 years, 3 months ago by [craigstanfield](https://wordpress.org/support/users/craigstanfield/). * Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/) * (@milindmore22) * [5 years, 3 months ago](https://wordpress.org/support/topic/amp-responsive-menu-desktop/#post-14167205) * Hello [@craigstanfield](https://wordpress.org/support/users/craigstanfield/) * You can check other themes like Astra or Neve for reference or you can check [this](https://github.com/milindmore22/amp-chaplin-compatibility/blob/main/class-sanitizer.php#L56-L89) code which I added for the [Chaplin theme](https://wordpress.org/support/theme/chaplin/). Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘AMP responsive menu desktop’ is closed to new replies. * ![](https://ps.w.org/amp/assets/icon.svg?rev=2527602) * [AMP](https://wordpress.org/plugins/amp/) * [Frequently Asked Questions](https://wordpress.org/plugins/amp/#faq) * [Support Threads](https://wordpress.org/support/plugin/amp/) * [Active Topics](https://wordpress.org/support/plugin/amp/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/amp/unresolved/) * [Reviews](https://wordpress.org/support/plugin/amp/reviews/) ## Tags * [foundation](https://wordpress.org/support/topic-tag/foundation/) * [menu](https://wordpress.org/support/topic-tag/menu/) * [width](https://wordpress.org/support/topic-tag/width/) * 7 replies * 2 participants * Last reply from: [Milind More](https://wordpress.org/support/users/milindmore22/) * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/amp-responsive-menu-desktop/#post-14167205) * Status: resolved