How To Configure Menus in Avada
In this video will be looking at how to configure menus in about a couple of closely related videos of the how to create and assign menus in Avada and how to configure your header in about a video. So, check the video description for links to those.
But in this video, we will look at the various ways to configure a menu both in the about a theme options and in the menu itself, let’s begin.
For our example, we’re going to look at the about a University demo as this particular demo has quite a complex menu. As you can see here with menu highlight labels and a couple of very fancy mega menus. Let’s look at how this was put together.
To configure the menu as a whole, we need to navigate to the Avada theme options panel and then menu.
As you can see, there are several menu related tabs. The first one is main menu.
The first setting is menu height. This sets the overall height of the menu by adjusting the line height of the menu items.
This is usually adjusted once the logo has been added, as that’s the other main factor in menu height. As an aid, you will even see a pixel value in the main menu height description which is calculated to match your logo hood.
Next comes main menu. Highlight style of other offers. 5 main menu highlight styles. Top bar bottom bar, arrow background and color only.
Depending on what option you choose, there will be different options directly below this. To configure the individual highlight selections.
All styles offer configuration of multiple options to achieve your desired effect.
The arrow style, for example, works best when there is a page title bar, a slider, or a full width image right up to the header. So, the arrows stand out and the background option, which gives a solid background color to the current page and the others on mouseover can have its background height adjusted with the main menu height. Please refer to the main menu highlight documentation for more information on this.
Linked in the description below.
An important option that comes next is the main menu item padding. This controls the space between the menu items and along with the menu font size can be a very useful tool to help distribute your menu appropriately across the header.
Below this are many more options to configure your menu exactly the way you want. Go through these options slowly and carefully to configure the menu as you wish.
One thing that perhaps would be good on a University menu is a main menu search icon. It’s currently turned off, but if we turn it on here, it will show at the end of our menu and also in the sticky header as well.
At the bottom of this tab is the menu typography section where the main menu typography is configured. Here the menu, Fontana, hover and dropdown colors have been chosen to suit the header.
There are also other theme option tabs for the other types of menus, flyout menus, mobile menus, mega menus and even the secondary top menu or get their own tabs with loads of different options for configuration.
These options will only be useful if you are currently using a header that can take advantage of them. In this demo, the flyout menu is not being used and there are no main menu icons, but the line height and font color of the secondary top menu have been changed and other small changes have been made in the mobile menu and Mega Menu tabs.
Apart from the theme options, there is also another area where we can configure individual menu items and this feature has been heavily utilized in the University demo.
If we head over to the appearance menu page at the bottom of every menu item, you’ll see a Avada menu options button.
This is a very powerful tool for styling and configuring the individual menu items in several ways.
The best way to highlight the options here is to reverse engineer the University main menu.
The home about facilities, news and admission links are all standard page links. With the exception of a small edition on the admission menu item. Let’s start there with something simple.
Here if I open the about a menu options for that menu item, we can Scroll down a little bit and see that a menu highlight label has been added and styled with a background and text color.
As we will see, this has been heavily used in many of the menu items. It’s a simple and effective way to bring attention to a menu item.
One of the few about the menu option features not used in this menu is changing. The menu first level style to a button, which is set in the top option. You’ll see buttons on menus. In many of the other demos, including the SCO movers and electrician demos.
Another unused feature in this demo is the use of icons on the main menu items. This can be seen effectively on the spa demo.
And finally, the modal anchor window option hasn’t been used.
This option enables you to open a modal dialog from a menu item to show you how this option works. I need to cancel out of here and create a new custom menu item.
I’ll add a hashtag here as we don’t want any other link and add the name alumni here in the label. I’ll just add that to the menu.
The position at the bottom is perfect, so I’ll just open this menu item and go into the of other menu options. All I need to do here is to add the name of the modal. This will trigger here under the modal anchor window option. I’ll just call it alumni.
Let’s save that menu and go create our modal.
I’ve got a blank page here and text you and I will use the Fusion Shortcode generator to add a modal element to the page.
I’ll give it the same name as I added into the menu item alumni and then just quickly add some content.
Once I’ve added my content, I will insert it into the page and select and copy it.
Now we’ll head over to the widgets area for a menu link to open a modal. The modal content has to be on every page, so one of the best places to place the modal content is in a footer widget and we have an empty one right here which will do nicely.
I’ll add a text widget to this widget area.
And I’ll just switch to the text editor here as this code has some HTML in it and I will paste the code in and click save.
If we return to our front end now and refresh the page.
We can now see a new menu item at the end and if I click it that opens up the modal I created.
We can also see the main menu search icon I turned on earlier.
OK, that was a little detour, so let’s return our attention to our main menu and the next ones to look at these complex ones. The course is an events menu items, as you can see, mega menus are enabled on both of these menu items and they have four columns.
Each one of these is a menu item in the back end and the first one, even has some sub menu items.
So, let’s go back and see how they were created.
If we start with the parent menu item, it is called courses and it is just a normal page link. If we open the Avada menu options, we can see it has a highlight label. The Fusion Mega Menu has been enabled and it has been set to full width with the number of columns set to order. This just takes the number of child menu items and adjusts accordingly.
Then we have the first of the sub menu or child menu items. Then you course sub item. This is a custom link linking to the same page as the courses link above but the content is being specified in the Avada menu options.
Again, it has a highlight label as well as an icon and a mega menu column title.
And it’s storing the rest of the content from the course. One widget area set here in the Mega Menu Widget area.
If we follow that trial and go and look at the widgets page. We can see that the course. One widget area. Just has a text widget with this small amount of dummy text in it.
Back on the front end we can see the icon, the Mega Menu column title and the highlight label. Here with the text from the widget showing directly beneath. Under that we can see four links which in the menu are the four sub menu items of the new courses’ menu item.
As you can see on the back end, they are all custom links linking to various pages.
Upcoming events as a menu highlight label setting the Avada menu options, but otherwise all styling is coming from the main theme options, partly from the main menu dropdown. Styling background and hover colors and partly from the Mega Menu styling. Mega Menu column title, size item padding and item divider.
Let’s move on to the next two columns.
Which is quickly look at the front end again to refresh your memory.
The two columns are structurally the same as each other, so we only need to look at one.
Back in the menu these two sub menu items are called course one and course 2.
If we open course one, we can see it’s a custom link with no link in the of other menu options. However, there is 1 setting changed and that is calling the content from the courses two widget area in the Mega Menu Widget area.
Let’s head back to the widgets page and say what’s happening there.
If we open the courses to widget area, we can see perhaps not so surprisingly that it is made up of four widgets, two image widgets, and two text widgets. This corresponds of course to the images and links we see in the second column of the courses menu on the front end, and the third column is made in exactly the same way.
The final column is deceptively simple, as we can say it’s just a background image.
Looking at the menu item again, we discover it is again a custom link with an image configured in the Mega Menu Flyout menu background image option of the about a menu option.
OK so now we can see how the courses. Megamenu was created the events. One will be much simpler to understand.
The first three columns are essentially the same as each other, and the last one has a background image with some text and a button.
Go into the menu. We can see that the 1st three subitems of the events item are all custom links linking to various pages.
In the other menu options, they have highlighted labels and the Mega Menu column title has been turned on and the actual content apart from the title is coming from events widget areas linked at the bottom in the Mega Menu Widget area.
The widget areas themselves are populated by an image and a text widget, just like the columns in the courses menu, although this time the text widgets have a little more content.
The final column in the events menu is an empty custom link.
But in the Averter menu options has of course a background image and the content is coming from the final widget area events 4.
Looking at the events for widget area. We can see it’s populated with a text widget containing a mixture of HTML and a Fusion button shortcut.
If we come back one last time to the front end, we can gaze admiringly at these awesome menus and yet realize how surprisingly simple they are to make. Once you understand the moving parts.
If you have really eagle eyes, you may also notice that the Mega Menu areas have a background color.
This is actually coming from the main menu dropdown background color option in the main menu theme options and if you think about this it is very logical as this is still a main menu dropdown item.
OK, cute us too. If you have stayed the distance with this one and I really hope you can now see just how versatile and feature rich about it is in the settings and options it provides for creating and configuring menus of all varieties.
OK, this concludes our video on how to configure menus in Avada. If you have any questions or need assistance, please create a support ticket our team will gladly assist you. As always, we want to thank you for choosing Avada.