Steps to Create a Menu :
You can create menus in WordPress by visiting Appearance -> Menus in your WordPress admin area.
3. Click on create a new menu.
4. Provide a name for your menu in the Menu Name field and then click the Create Menu button.
6. Next, you need to click Pages and View All. You can select the boxes for the pages that you want in your menu and click on add to menu button.
7: Go to Appearance-> Menus and create a new menu say AMP menu.
Now add the things which you want to shown in AMP menu.
There are three checkbox in AMP where you can add navigation menu.One is the Header and other is Footer area.
Header
If you want to add navigation menu in Header then select AMP menu checkbox for that particular menu and click on save menu button.
Footer
If you want to add navigation menu in Footer then select AMP Footer Menu checkbox for that particular menu and click on save menu button.
Note: You can add Menu in both Header and footer at the same time as well.
AMP Alternative Menu – Below the Header
If you want to add AMP Alternative Menu in Below the Header then select AMP Alternative Menu – Below the Header checkbox for that particular menu and click on save menu button.
Setup of Swift Theme
Follow these simple steps.
1. From the dashboard, we go to the left-hand side in Menu bar go to AMP option panel -> Click on Design Option -> Themes as shown in the below screenshot.
2. Got to Design option -> Themes -> Themes Selector option. When you click on Themes Selector option list will be shown . select the Swift theme.
3. Ones you select swift theme, this theme related option is shown in Header. Go to AMP option panel -> Design -> Header.
Header Design :
There are Three type of Header Design .which type of header design want you can select Header Type.
- Header Type 1(Default)
- Header Type 2
- Header Type 3
Go to AMP option panel -> Design -> Header ->Header Design
Navigation Menu Design :
This is the default menu type in Navigation Menu Design.
1. Go to AMP option panel -> Design -> Header ->Header Design
Menu Search:
Ones you enable Menu Search option search option will be shown on website
Menu Copyright:
If you enable Menu Copyright option it will be shown on website.
Go to AMP option panel -> Design -> Header ->Header Design -> Header Type
User can select Header Type 2 in this type additional Button Customize option will be show
- Button Customize : Ones enable button customize option it will show other option.
- Button Text: By using this field you can give Button text.
- Button Link : In this field you can give button link.
- Button Styles : When you enable button styles additional option will be show
- Border Type : Which type of border you want just select the border type.
Output will be display like this:
Alternative Menu:
Ones you enable Alternative Menu option menu it will be shown on website.
Output of Alternative Menu option
- Alt Menu Padding : You can add padding for Alternative Menu.
- Alt Menu Text : By using this option you can add text color for Alternative Menu.
- Alt Menu Background : By using this option you can add background color for Alternative Menu.
Dropdown Support : when you enable this option it will Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation bar.
Header Settings:
Call Now Button : user enable this option enter phone number field will be show, ones you enter the phone number in this filed this phone functionality will be display on header.
Non-AMP link in Header : Ones you enable this option when you click on text or logo non amp link will be show
Search : when you enable search option this search functionality will be show in header.
Sticky Header: The sticky header will fix the header in the top portion of your web page when a user scrolls the page. It will allow quick access to the menu from any part of the page.
Advanced Header Options :
If you want advance header design below the option are use. By using this option you can change the header width , header height and menu color etc. ones you done all setting click on save change button.
The output of Swift Theme:
Setup of Design Three Theme
1. First go to WordPress Admin Area -> AMP option panel -> Design -> Themes
2. Go to Design option -> Themes -> Themes Selector option. When you click on Themes Selector option list will be shown . select the Design Three theme.
3. Ones you select Design Three theme, this theme related option is shown in Header. Go to AMP option panel -> Design -> Header.
Navigation Menu Design :
Navigation Menu: Once you enable this option in the header menu will be created in the left side.
Header Settings:
Call Now Button: Once you enable this option call icon will be created in the Header section.
Non-AMP link in Header: Once you click on the header in the logo it will redirect to Non-AMP page.
Make Header UnSticky: Turning it ON will remove the sticky head from the design.
Search: If you enable this option search option will be displayed in the header section.
Header Background: In this option, you can select the background color for Header in design three.
Header Elements: In this option, you can select the text color for Header in design three.
The output of the Design Three Theme:
Setup of Design Two Theme
1. First go to WordPress Admin Area -> AMP option panel -> Design -> Themes
2. Go to Design option -> Themes -> Themes Selector option. When you click on Themes Selector option list will be shown . select the Design Two theme.
3. Ones you select Design Two theme, this theme related option is shown in Header. Go to AMP option panel -> Design -> Header.
Navigation Menu Design :
Navigation Menu: Once you enable this option in the header menu will be created on the right side.
The output of the Navigation Menu:
Header Settings:
Call Now Button: Once you enable this option call icon will be created in the Header section.
Non-AMP link in Header: Once you click on the header in the logo it will redirect to Non-AMP page.
Search: If you enable this option search option will be displayed in the header section.
The output of Design Two Theme:
Setup of Design One Theme
1. First go to WordPress Admin Area -> AMP option panel -> Design -> Themes
2. Go to Design option -> Themes -> Themes Selector option. When you click on Themes Selector option list will be shown . select the Design One theme.
3. Ones you select Design One theme, this theme related option is shown in Header. Go to AMP option panel -> Design -> Header.
Navigation Menu Design :
Navigation Menu: Once you enable this option in the header menu will be created on the right side.
The output of the Navigation Menu:
Header Settings:
Non-AMP link in Header: Once you click on the header in the logo it will redirect to Non-AMP page.
Search: If you enable this option search option will be displayed in the header section.
The output of Design One Theme:
That’s it for this tutorial!
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.
My theme already has a nice mobile menu. Why would I want to use this? Would this replace my current menu? I am confused by this plugin. Are you actually remaking my site entirely?
My site is already looking good on mobile. I hope you can help clear this up. Thanks.
Hi Steve,
Yes your mobile menu will get changed when you visit the AMP pages because in many cases the mobile menu will be built with javascript and jquery and that is not allowed in AMP and in addition to this only 50K limit of CSS is allowed in AMP and due to this you cannot use your mobile menu in AMP and because of this only we create the new menu in AMP and that will only appear when your visitor comes to AMP pages and when visiting the normal website it will display the mobile menu only
Hello – can you tell me how to remove the menu when using the Swift theme?
Hi Bob,
You need to Uncheck AMP Menu by going to WordPress Admin Area -> Appearance -> Menu -> Uncheck AMP Menu – https://monosnap.com/file/n2k2kN0YwUSdTpHtuU6qenKqCev82g
Hi, I have the pro version of the software, however, I cannot see AMP Menu on Appearance -> Menu.
These are the options displayed:
Automatically add new top-level pages to this menu
Display location
Main Menu | depth 5 (Overlay | depth 1) (Currently set to: Main Menu)
Secondary Menu | depth 2 (Split | depth 5)
Languages Menu | depth 1
Social Menu Top | depth 1
Social Menu Bottom | depth 1
AMP Footer Menu
As you can see, no AMP Menu. What could be wrong?
Hi Federico,
Will you please contact our technical team from here- https://ampforwp.com/support/ they will help you as soon as possible.
How to disable the top menu link from the drop down, I need only drop downs to be linkable. Also I need the top/holder links to open the dropdown, not just the arrows.
Thanks in advance.
Hi Peter,
Will you please contact our technical team from here- https://ampforwp.com/support/ and they will help you to fix the issue.
AMP Menu Not showing in the Manu area only showing only showing AMP Footer menu ?
Hi abu,
Will you please provide us the URL of your website so we will check from where you are getting issues and help you.
I have the same issue. The header menu does not have any items. The footer menu is working well.
Please, look at my case https://fancyhouse-design.com/home-interior-design-dubai/amp/
Hi John67,
Will you please contact our technical team from here- https://ampforwp.com/support/ they will help you as soon as possible.
I have added a menu. When on the AMP version of my site and you click a link in the menu it takes you to the normal version of the site? Why is this, am I doing something wrong?
Hi John,
Will you please follow this tutorial – https://ampforwp.com/tutorials/article/how-to-add-amp-in-menu-url/ And if you have any issues/problems after following this tutorial also then please let us know and we will personally help you.