How to Set Up Navigation Menu in AMP

Steps to Create a Menu :

1. You need to enter your WordPress dashboard. Click Appearance.

    2. Click Appearance -> Menus.

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 two checkbox in AMP where you can add navigation menu.One is the Header and other is Footer area.

• AMP Menu
• AMP Footer Menu

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.

 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.

2. Click on Design Option as shown in the below screenshot.

3. Got to Design option -> Themes ->  Themes Selector option. When you click on  Themes Selector option  list will be shown . select  the Swift theme.

4. 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. 

1. Header Type 1(Default)
2. Header Type 2
3. 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.

How to Add AMP in Menu URL

You can select if the links of navigation items should link to AMP pages(example.com/eample/amp/) or non-AMP pages(example.com/eample).

If you want to have all the links in AMP, then enable the ‘Auto Add AMP in Menu URL’ option from Settings-> Advance Settings in AMP options panel.

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.