Need help with AMP hamburger toggling code

Hello @shobha2208

Thanks for the support topic, I don’t see AMP page active on your site at the movement, your theme may not be AMP compatible (you can find AMP-compatible themes on our site ), so some aspects of your theme which are javascript-based may not work properly, for the mobile navigations please download the following plugin as a zip file and install it.

Plugin: https://github.com/milindmore22/amp-generic-compat

Once the plugin is installed, active it and follow the next steps

1. Goto AMP -> AMP Compatibility
2. click Enable checkbox
3. Add the details in input boxes in one row the final result will be someing like this screenshot
4. Add ul below Element
5. Add genesis-nav-menu below Element Class
6. Add show below Element Toggle Class
7. Add div below Action Element
8. Add responsive-menu-icon below Action Element class
9. Add active below Action Element Toggle Class
10. Once all inputs are in place click save

Finally, Goto AMP Compatability -> CSS -> Click Enable check box and add the following CSS (screenshot)

.show {
	display:block;
}

Once CSS is added click save and check the menu on a mobile device.

Hope this helps!

Hi Milind:

I tried all the steps you said. (I had temporarily deactivated AMP for WordPress till I got your answer).

But even after these steps the menu is a vertical list under the logo but no collapsing into a hamburger menu.

I tried in both my iPhone and Android.

Shobha

Hello @shobha2208

It looks like your hamburger menu button was getting removed on the AMP page.

Can you please switch to Transitional mode for now, Also Please keep the AMP plugin and changes we did.

I will further investigate the issue.

Milind: I have set to Transitional mode and kept everything as is.

Hello @shobha2208

Thank you for your patience, I am able to debug the issue and happy to share the solution with you!

As I checked you are using the Agency Pro theme which adds a Mobile menu button (hamburger button ) with javascript on your mobile page. The AMP plugin does not allow custom javascript on AMP pages so it’s been removed.

first We need to add some code to your themes functions.php

Step 1 Goto -> Appearance -> Theme Editor and select functions.php file
(screenshot)

Step 2 Scroll Down at end of the file and add the code below (screenshot)

/**
 * Add responsive menu icon for AMP page.
 *
 * @param string $menu_markup html makrup.
 * @return string html menu markup.
 */
function add_mobile_menu_button( $menu_markup ) {
	if ( wp_is_mobile() && function_exists( 'amp_is_request' ) && amp_is_request() ) {
		$menu_markup = str_replace( '<div class="wrap">', '<div class="wrap"><div class="responsive-menu-icon"></div>', $menu_markup );
	}

	return $menu_markup;
}

add_filter( 'genesis_do_nav', 'add_mobile_menu_button' );

The Next Step will be to update the CSS we added.

Goto AMP Compatability -> CSS and add the CSS below (screenshot)

@media only screen and (max-width: 680px) {
	.genesis-nav-menu {
		display: none;
	}

	.genesis-nav-menu > .menu-item > .sub-menu {
		display:block;
	}

	.genesis-nav-menu .menu-item {
		width:100%;
		border-bottom:1px solid #ccc;
	}

	.show{
		display:block;
	}
}

Check the AMP page on mobile using this link https://solohacks-academy.com/?amp=1

Let me know if you face any further issues.

Oh ok, so the hamburger was controlled by javascript. Yes I will try the steps. Thanks.

Can I change to Standard option if the code works? Also do you have any such fix for forms in AMP. Neither Gravity Form nor WP forms is working in AMP …

It works very well. But every time I click a page to go back to the hamburger I have to refresh the page.

hello @shobha2208

Yes, you can switch back to Standard mode once code works, WP forms (the free version) is fully AMP Compatible, WP Forms premium version adds some incompatibilities.

You can check out the list of alternative AMP Compatible plugins on our site

Additionally, Please check our list of extesions and mini plugin which may address some incompatabilities.

• This reply was modified 3 years, 4 months ago by Milind More.

Okay, thanks so very much for the help.

Regards, and stay safe,

Shobha

Milind”

I am having an issue with the WP Forms Lite. I have set up their own SMTP also correctly and am receiving emails when testing. But the form on my contact page at [ redundant link removed ] is just showing a word “submitting …” at the bottom endlessly with calling up the confirmation message. This happening both on laptop and mobile. The Standrad option is set now AMP along with your codes and plugins all intact as you showed me. The problem of yesterday re hamburger is all solved beautifully. Only pronlem is this WP Forms Lite. Please help.

By the way age speed insights from Google shows top rank for both laptop and mobile after changing to AMP Standard.

• This reply was modified 3 years, 4 months ago by Shobha2208.
• This reply was modified 3 years, 4 months ago by Jan Dembowski.

Hello @shobha2208

Glad the menu worked and you are getting a good Page speed score, I will respond to you on the WPForms issue on the new topic you have created, In the meantime, if you have time feel free to leave a review for the plugin.

I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.