Avada Vertical and Horizontal Menu Widgets
Released in Avada 5.3 the Avada Vertical and Horizontal Menu widgets gives you greater flexibility in how to manage and control menu options for your site. The Vertical Menu Widget ‘Menu Type’ option allows you to choose between ‘Custom Menu’ and ‘Vertical Menu’ types and the Horizontal Menu Widget ‘Alignment’ option gives you left/center/right alignment choices. Vertical and horizontal menus gives your site greater flexibility and navigation options at your visitors fingertips.
This allows you to make a make a normal horizontal menu by placing it anywhere on the page via the Avada: Horizontal Menu widget.
Configuring The Horizontal Menu Widget
Step 1 – Go to Appearance > Widgets section, and drag the ‘Avada: Horizontal Menu’ widget to a widget area.
Step 2 – Select the menu you want to use. It will pull any normally created WordPress menu. You can create a menu from your Appearance > Menus section.
Step 3 – Set the other styling for alignment, padding, color, etc.
Step 4 – Don’t forget to hit Save button.
To set a horizontal menu in your footer, check this: Horizontal Menu in Footer Widget Area
With Avada: Vertical Menu widget, this allows you to make a side navigation in two ways: using a Custom Menu type or a Vertical Menu type. More information on these two types in the below sections.
Configuring The Vertical Menu Widget
Step 1 – Go to Appearance > Widgets, and drag the ‘Avada: Vertical Menu’ widget to a widget area.
Step 2 – Set a title for your widget/side navigation. You can choose to leave the Title field empty if you don’t want to display a title for this.
Step 4 – Set the other styling for behaviour, layout, font size, and border color.
Step 5 – Don’t forget to hit Save button.
The Custom Menu allows you to simply choose an already created WordPress menu. You can create a menu from your Appearance > Menus section.
When you choose Custom Menu in the Menu Type dropdown, simply select a menu on the Select Menu dropdown. With the introduction of Avada 5.7, this menu now also displays icons if they have been selected in the chosen Custom Menu.
The Vertical Menu option requires you to select a parent page and works just like the old Side Navigation page template.
When you choose Vertical Menu in the Menu Type dropdown, simply select a parent page on the Parent Page dropdown. Only the parent pages will appear on this list.
If you have a set of pages in your website, you can set one as the parent page and set the other pages to use that parent. Setting this is just the same as the side navigation template’s. Please check the Side Navigation template section for more information on how to set up the parent and child pages.
Avada includes a Side Navigation page template that can be used to insert large amounts of content on a single page. You can also set up second level menu items on the Side Navigation page that will collapse by default and expand when the parent level is moused over or clicked, depending on how you set it in Fusion Theme Options. You create Side Navigation pages in sets. Each set always has to have a Parent page that will show at the top. Then you create additional pages and assign them to the parent page. All the pages assigned to the parent page will make one side navigation set.
How To Create A Side Navigation Page
Step 1 – Navigate to Pages and click Add New.
Step 2 – Input a new name for your page, then find the Page Attributes box on the right side.
Step 3 – Select Side Navigation from the page template dropdown list and click save.
Step 4 – To add more pages to the side navigation set, create another new page and select your newly made page as the Parent page, and set the Template to Side Navigation.
Step 5 – Choose to have the side navigation set on the left or right side by selecting Left or Right from the Sidebar Position dropdown field in the Fusion Page Options box.
Step 6 – Menu order is set alphabetically, change it by inserting a new order for each page in the Order field.
Step 7 – Once you are done, be sure to Publish each of the pages.