Plugins
0

AMP Sidebar Hamburger Menu

LICENSE TYPE: INFINITE

Description

If youre using AMP in transitional or standard mode check the FAQs below, or follow the instructions in the settings tab after installing.

Features:

  • Easy to setup
  • Works in AMP and non AMP
  • Fast load, optimal performing
  • Unlimited hamburger toggle color options
  • Options for rending in desktop and mobile
  • Bloatware free, non intrusive
  • Completely free

Screenshots

Installation

Using The WordPress Dashboard

  1. Install as a typical WordPress plugin (from the WordPress repository or via a file upload)
  2. Activate the plugin through the Plugins menu in WordPress
  3. After activating the plugin youll see a AMP sidebar menu within the Settings tab
  4. Insert the shortcode via a page builder using
[jz-sidebar]

or insert into your theme files using

 

Note: If you prefer to use your existing navigation menus button simply add the following attributes to your navigation button:

 

Note: You should perform the above using a child theme, so any changes dont get overwritten. As an alternative to the shortcode above if you wish to add the attributes directly into your navigation menu you can apply the below attribute into your existing button:

on="tap:sidenav.open" role="button" tabindex="0"  

FAQ

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, youll need to add the below code snippet in between your button markup. If youre 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 youre 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 wont overwrite your additions.

Of course, performing regular backups is general best practice. I dont 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. Youll 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 youll 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 youve set the option to display the hamburger menu in AMP URLs only make sure youre 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 its 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 youve 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 isnt working it may be JavaScript based, checkout this solution. Well 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 cant configure as expected leave a support question for the team to assist. Dont be one of those guys leaving a review without having raised a support topic.

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

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Most Viewed Posts
Menu