Published On: June 8th, 2020|3.3 min read|620 words|
Note : Recent changes to Avada have left this non-functional. The image slider will not load in the widget area of the menu. You may or may not have success with this.
An Avada user was faced with a dilemma, how to get 7 columns on a mega-menu without forcing a second row? The short answer is you can’t. Avada uses a maximum of six columns for everything. Thinking about what they were trying to do, I wondered if there was an alternative solution. After giving it some thought, I wondered if the columns were important or the ability to feature the images. My solution was a carousel in the left half of the mega-menu and a two-column list in the right half.
The first step was to create carousel to hold the images. All of these images represent a different style or art and have a portrait orientation. The consistent orientation helps. After some experimentation, sizing the image to 185 by 250 pixels seemed to produce the correct layout.
Create a test page or post to create a carousel
Using Fusion Builder, add a carousel component
Picture size =Auto
Maximum columns = 1
Element Visibility – medium and large screen only
Add each image with the hyperlink and correct alternative text
Once complete save this carousel as a Global Element so that Fusion Builder assigns a shortcode (Figure 1)
Figure 1. Global element with shortcode
Creating a Widget
In order to use the carousel within the mega-menu you must create a widget area to hold the widget.
Go to Appearance >> Widgets
Create a new widget area with a name that makes sense to you
Add the Custom HTML widget
In the content area add the shortcode for the global element.
Figure 2. Creating a widget area and widget
Creating the Mega-Menu
Creating the menu is essentially the same as any other menu until you add the widget.
Go to the menu editor (Appearance Menus)
Using the Custom Links option enter the hashtag as the URL and enter the name of your menu item – I chose Courses.
Then click on the Avada Menu Option
Turn on Full Width Mega Menu (I have my full width set to 1200 pixels). Not choosing full width will work, but not in this instance.
In the number of columns choose Auto
Add you first menu item to hold the carousel
Add the hashtag (#) as the URL
Enter a name (you will be turning this off)
Click Avada Menu Options
Scroll to the bottom of the options
Set Mega Menu Column Title to Off
In the Mega Menu Widget Area dropdown, select the the widget area you created earlier
Figure 3. Mega menu options
The next step is to add a new menu item Course List
Then add the list of course posts or pages
While a course list of seven items is not excessive, I felt that a two-column layout would be best. Initially, I tried another column with an invisible title, but it has some spacing issues and doesn’t work as needed on mobile.
The solution was to add a class to the courses list (two-col-sub) and then add a few lines of custom css*. I used a media query to ensure that the behavior on mobile is as expected.
Copy to Clipboard
*If you do not see the CSS options on the menu, open the Screen Options and check CSS Classes.
Figure 4. Screen Option panel in the open position