Avada Vertical and Horizontal Menu Widgets

11/20/2017

New for Avada 5.3 are the Avada Vertical and Horizontal Menu widgets, giving you greater flexibility in how to manage and control menu options for your site. The Vertical Menu Widget allows you to choose between ‘Custom Menu’ and ‘Vertical Menu’ types and the Horizontal Menu Widget can have left/center/right alignment. Each Menu widget has configurable options to perfect the layout and styling of the menu

Overview

  • Avada: Horizontal Menu widget: This section covers the information on how to use the Horizontal Menu widget.
  • Avada: Vertical Menu widget: This section covers detailed information on how to use Vertical Menu widget and how to set up a side navigation.
  • Side Navigation template: This section covers the information on how to set up a side navigation using the Side Navigation template. (This will be deprecated soon.)
IMPORTANT NOTE – If you want to set up a side navigation, we recommend using the Avada: Vertical Menu widget instead of the Side Navigation page template which will be deprecated in a future version of Avada.

Avada: Horizontal Menu Widget

This allows you to make a make a normal horizontal menu by placing it anywhere on the page via the Avada: Horizontal Menu widget.

How To Use Avada: 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


Avada: Vertical Menu Widget

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.

How To Use Avada: Vertical Menu Widget

Step 1 – Go to Appearance > Widgets section, 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 detailed below.

Step 4 – Set the other styling for behaviour, layout, font size, and border color.

Step 5 – Don’t forget to hit Save button.


Using Avada: Vertical Menu Widget – Custom Menu

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.


Using Avada: Vertical Menu Widget – Vertical 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.


Side Navigation Template

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.

IMPORTANT NOTE – The ‘Side Navigation’ page template will be deprecated in a future version of Avada. We have replaced it with a better solution, the Avada: Vertical Menu widget. This new widget offers the same features but with greater flexibility. It works with the WP menu system. Please utilize this new method instead of the page template which will eventually be removed.

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.


0 Likes
Proudly Serving Over 390000 Satisfied Users!