AMP Sidebar Hamburger Menu

After assigning a menu to the newly created "AMP Sidebar" location there are different ways to apply the navigation menu. One method is to use a shortcode to into your favourite code editor (or widgets as of WordPress 4.9). [jz-sidebar] If you wish to place the shortcode into your theme templates you can do so by adding the below, wherever you choose. For best results find the location of your existing hamburger menu, and apply the following: If you want to use your existing hamburger menu for AMP URLs and use this plugin the below can be added as an attribute to your existing button. Please backup your site first:

Sure, you'll need to add the below code snippet in between your button markup. If you’re unable to locate your themes navigation menu button check with your theme developer. You simply need to add the below in as an attribute to your existing button.

If you’re unsure where to place the data attribute to use with your existing navigation menu check with your theme developer. Bear in mind this plugin may not be required at all if your theme supports AMP. So be sure to ask your theme developer if they have AMP compatibility plans first.

Using a child theme is highly recommended. You never know when things go wrong. In addition to safeguarding against mishaps theme updates won’t overwrite your additions.

Of course, performing regular backups is general best practice. I don't take any responsibility for site issues due to misconfiguration, or shortcode misplacement.

Good question - yes, you can. If you are looking to use this for your non AMP site you should select the “AMP & Canonical” option from the configuration settings. You’ll need to place the shortcode or navigation menu attributes into your theme files (preferably via a child theme)

If using the AMP plugin in reader mode you are making use of the AMP plugins classic templates. The hard work is all done, simply install and activate the plugin before checking your reader mode AMP urls. One thing to note when using reader mode, the amp-sidebar hamburger menu will not be added to your non AMP urls until you place the shortcode into your child themes templates. The “AMP & Canonical” option is redundant, unless of course you decide to add the shortcode to your theme.

Sure, but you’ll have to locate your existing navigation menu and replace it with this hamburger menu. Note that this plugin only offers a hamburger menu. There is no support for a horizontal dropdown menu.

You can apply CSS as you would normally, to your active themes style.css file,your themes “custom CSS” field, or preferably a custom plugin.

Perform the following checks or considerations:

1. Are you viewing from mobile?
2. Did you assign your menu to the AMP sidebar menu location?
3. Did you place the shortcode into a visible part of your site?
4. Did you tick the checkbox in your menus screen? If you’ve set the option to display the hamburger menu in AMP URLs only make sure you're checking from an actual AMP url. You can use the AMPinspect Chrome extension to view your AMP URLs, or the AMP plugins preview, admin bar link.
5. Did you insert the shortcode/navigation snippet in the correct place? If you added a shortcode to your content (ie. widgets) are you sure that widget appears on the URL you are checking? If you added a shortcode to your theme files directly you will need to ensure it’s correctly placed. Feel free to open a support topic if you have any problems.
6. Did you insert the AMP button code snippet into the correct theme button? You may be using a complex theme, with different menus based on different devices.
7. Are you using the correct theme? When adding code snippets to your theme templates do you have that template active? If using a child theme you may need to add the code snippet to your parent theme, depending on how you setup your child theme.
8. Check your defined menu colour! By default the navigation/hamburger menu button is a light black colour. This might not suit your site/menu background if also black. A black menu on a black ground = invisible!

If you’ve just got your navigation menu working in your non compatible theme (via this plugin) be sure to also check whether your search button is working, along with your back to top button. If your back to top isn’t working it may be JavaScript based, checkout this solution. We’ll have a search box plugin released soon. If you manage to get your incompatible site working it would be great to hear from you. Share a review with your site URL, or get your AMP site listed on the plugins website showcase.

You can checkout the plugin on the WordPress repository. Alternatively visit the plugin website, www.amp-wp.org. If you can’t configure as expected leave a support question for the team to assist. Don’t be one of those guys leaving a review without having raised a support topic. = Where can I find out more about AMP? The best place to find out more is amp.dev. Other useful resources below:

• www.amp-wp.org: The official plugin website.
• The AMP Channel on YouTube
• AMP on Slack