This blog tutorial for learning how to create mega menu in Helix framework.

Mega Menu is very easy to create beautiful and customized menus for your website, also with modules inside. In additional, it also boosts SEO and user engagement. So in this post, we will show you how to Set Up Mega Menu In Helix III Framework.

Firstly, in template setting, you have access to 4 options only, more advanced settings are “hidden” in Menu Manager inside each menu item, check out!

How To Set Up Mega Menu In Helix Iii Framework

SELECT MENU

You can choose menu from available in your system. And if you’re gonna build multilingual site in Joomla 3.4, then you have to create clone of current template for each addcional language and choose here a Main Menu for each of them.

There are enabled two separate menus: Mega Menu and Off Canvas Menu [=] ( sometimes it’s called Hamburger Menu). You can use both or only one of them.

How To Set Up Mega Menu In Helix Iii Framework

Off Canvas Menu is external menu module, so you have to create a menu module if you wanna use this area. Don’t forget to choose “offcanvas” module position for them.

How To Set Up Mega Menu In Helix Iii Framework

What is more important in this sidebar menu you can also publish not only menu modules, but also for example Search module, it also have to had a “offcanvas” position chosen in Module Manager.

HOW TO DISABLE OFFCANVAS MENU IN DESKTOP

To disable Off Canvas [=] menu from desktop view only (!), select “Mega Menu”, you’ve done.

How To Set Up Mega Menu In Helix Iii Framework

Dropdown Menu Width value would be to set it to the width of your submenu size content area. By default 240px.

MegaMenu offer four transition options for your dropdown submenus:

No Animation
Fade
Zoom
Fade In Up
Elastic
Slide Down
Drop In
Twist

You can set this to None (No Animation) to have the submenu appear with no fancy effect.

MENU ITEMS FONT SIZE

In current version of template you can do this using custom css code:

.sp-megamenu-parent > li > a {font-size:14px;}

by default we used font-size :12px, so 2px more means bigger letters and so on.

How To Set Up Mega Menu In Helix Iii Framework

OFF CANVAS MENU CUSTOMIZATION

To change color of Off Canvas (mobile) Menu icon [=] (which may be white or black by default), follow custom CSS code, in this example we chosen red:

#offcanvas-toggler > i { color: red !important; font-size: 32px; }

To change color of Off Canvas menu items, you can try example custom CSS code:

.offcanvas-inner .sp-module ul > li > a { color: red;  }
.offcanvas-inner .sp-module ul > li > a:hover { color: blue; }

In this example we chosen red for links and blue for links with :hover selector – when you mouse over them, try with other name or hex colors as well.

HOW TO ADD BACKGROUND COLOR / IMAGE TO DROPDOWN MENU AREA

First you have to know that it request a custom CSS code.

How To Set Up Mega Menu In Helix Iii Framework

You just follow this CSS code:

 .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #22b8f0;
    padding: 15px;
}

Next, to add background image, you have to add more parameters to background property. The background and background-image property in CSS applies a graphic (PNG, JPG, GIF, SVG and data URI) or gradient to the background of an element. The url() value allows you to provide a file path to any image, and it will show up as the background for submenu area.

Image background example code:

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #22b8f0 url(https://domain.com/images/menu_bg.png) no-repeat scroll 0 0 / cover;
}
How To Set Up Mega Menu In Helix Iii Framework

You can declare the background of an element to be a solid color in CSS or image, However, using gradients declared in CSS3, rather using an actual image file, is better for site performance.

Gradient sub menu background example code:

 .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #a048b9 linear-gradient(140deg, #a048b9 0%, #a048b9 10%, #9845b0 10%, #9845b0 20%, #8c40a3 19%, #9041a6 21%, #9041a6 20%, #9041a6 30%, #853c99 29%, #883e9d 31%, #883e9d 30%, #883e9d 40%, #7d3990 39%, #803a94 41%, #803a94 40%, #803a94 50%, #753587 49%, #78368b 51%, #78368b 50%, #78368b 60%, #6d317e 59%, #703381 61%, #703381 60%, #703381 70%, #652e74 69%, #682f78 71%, #682f78 70%, #682f78 80%, #5d2a6b 79%, #602b6f 81%, #602b6f 80%, #602b6f 90%, #552662 89%, #582866 91%, #582866 90%, #582866 100%) repeat scroll 0 0;
    padding: 15px;
}

How To Set Up Mega Menu In Helix Iii Framework

SEARCH IN OFF CANVAS MENU

And now, if you want to add search module inside Off Canvas Menu, you need to do some thing below:

  1. Create New or Edit current search module (in Module Manager)
  2. Disable Module Title (probably you do not need it there)
  3. Change/Choose its position to “offcanvas”
  4. Assign to all or selected subpages (menu items)
  5. Publish module

Don’t forget that Menu should be the most important part there, so put it as a first or second position in the module order.

How to config mega menu with multi columns?

You can refine mega menu columns via details of parent menu item, by open parent menu via Admin > Extensions > Menu Managers > your parent menu item, open tab “Helix Menu Options”, you will see option below

Helix Iii Mega Menu Option

  • Dropdown Position – allows you choose align (left/right) dropdown position.
  • Show Menu Title – allows you to hide menu item title, this may be useful when you want to show only icon instead full title like for Home position.
  • Menu Icon – the use of icons beside menu items is a fantastic alternative that favors a quick visual option identification; and even the use of icons without text to accompany is viable. You can use font icons based on Font Awesome v4.3, it means that you have big collection of 519 icons to choose from.
  • Custom CSS Class – allows you to add Custom CSS Class(es) to this menu item.

Then, you continue open tab “Helix Megamenu options” in order to generate content and layout for your menu structure

Helix 3 Mega Menu

In above screen, you can create columns for menu, then drag-drop content for each columns with modules.

Mega Menu Layout

Manage layout for column by click to button ‘Manage Layout’, you can define left, right, center and full layout for menu content.

Helix3 Two Columns Menu

You also can define menu columns with menu structure that based on parent and child menu item, example with structure below (back-end)

Mega Menu Structure With Parent And Child Menu Items

and you can see result on front-end here

Mega Menu Columns Front-End Display

Conclusion:

Setup menu/canvas and mega menu structure in Helix framework is quite easy, you can select show/hide menu and canvas menu via Template Settings > Menu. And you can generate mega menu columns and content via details of parent menu item that you want to show with dropdowm menu in multi column.

Thanks for your reading, and if you have any questions with this blog, don’t hesitate to let us know by leaving a comment. ?

5/5 - (2 votes)
Lt Digital Team (Content &Amp; Marketing)
Latest posts by LT Digital Team (Content & Marketing) (see all)

The Big Summer Sale! Get 50% Off for everything on today, don't miss it. Coupon code: SUMMER50 Redeem Now
The Big Summer Sale! Get 50% Off for everything on today, don't miss it. Coupon code: SUMMER50 Redeem Now