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.

Here is the final solution

Creating the Carousel

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.

The Recipe

  1. Create a test page or post to create a carousel
  2. Using Fusion Builder, add a carousel component
    1. Picture size =Auto
    2. Maximum columns = 1
    3. Element Visibility – medium and large screen only
    4. Add each image with the hyperlink and correct alternative text
  3. 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.

The Recipe

  1. Go to Appearance >> Widgets
  2. Create a new widget area with a name that makes sense to you
  3. Add the Custom HTML widget
  4. In the content area add the shortcode for the global element.
  5. Save
Adding the widget

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.

The Recipe

  1. Go to the menu editor (Appearance Menus)
  2. Using the Custom Links option enter the hashtag as the URL and enter the name of your menu item – I chose Courses.
  3. Then click on the Avada Menu Option
    1. 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.
    2. In the number of columns choose Auto
    3. Add you first menu item to hold the carousel
      1. Add the hashtag (#) as the URL
      2. Enter a name (you will be turning this off)
      3. Click Avada Menu Options
      4. Scroll to the bottom of the options
      5. Set Mega Menu Column Title to Off
      6. In the Mega Menu Widget Area dropdown, select the the widget area you created earlier

Figure 3. Mega menu options

  1. The next step is to add a new menu item Course List
  2. Then add the list of course posts or pages

Bonus

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.

Screen Option Panel

Figure 4. Screen Option panel in the open position

Let me know what you think about this post.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You might also like to look at these

You might also like to look at these