With the Avada: Vertical Menu widget, you can make a side navigation in two ways: using a Custom Menu type or a Vertical Menu type. See below for more information on these two types.
Configuring The Vertical Menu Widget
Using The Widget Element
Step 1 – With the Widget Element, the widgets are configured live on the page, when they are added. So, the first step is to add the Widget Element to the column you wish to display your Vertical Menu.
Step 2 – Select the Vertical Menu Widget from the Widget dropdown menu. A range of configuration options will appear. Configure the widget as you wish.
Step 3 – You can also use the design tab to set styling, such as alignment, padding, color, etc.
Step 4 – Save the Element/Page.
Step 5 – Remember, you can also configure and style the column or container the Element is in.
Adding The Widget To A Widget Area
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 3 – Choose a Menu Type. This has two options: Custom Menu and Vertical Menu. Each option will be discussed in detail below.
Step 4 – Set the other styling for behavior, layout, and font size. Further options are available in the Avada Widget Options.
Step 5 – Don’t forget to hit the Save button.
The Custom Menu option simply allows you to choose an already created WordPress menu. You can create a menu from your Appearance > Menus section.
After you choose Custom Menu in the Menu Type dropdown, select a menu in the Select Menu dropdown. With Avada 5.7 and up, this menu now also displays icons if they have been selected in the chosen Custom Menu.
You can now configure the Widget as you wish.
If you choose the Vertical Menu from the Menu Type option, you need to then select a parent page and this 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. You don’t need to select a menu in the Select Menu Option. The Vertical Menu Type draws the menu from the parent page selected. Both the parent pages and the child pages will appear on this menu. Any child pages of the child pages will show when its parent item is either clicked or hovered over, depending on the option set further down in the widget.
Note: If you have a connected set of pages in your website, you can set one as the parent page and set sub pages to be children of that parent. You can also set pages to be the children of a child page. See the screenshot below, or for more information on this, see How to Set Up Parent and Child Pages in WordPress.