Documentation

Menu Settings & Customization

Mega Menu is an easy to use menu tool for creating beautiful, customized menus for your site, also with modules inside.  That also boosts SEO and user engagement. Here in template settings you have access to 4 options only, more advanced settings are "hidden" in Menu Manager inside each menu item - so please check also there.

 

Select Menu

It allows you to choose menu from available in your system. If you're planning to build multilingual site in Joomla 3.4 - you have to create clone of current template for each addcional language and choose here a Main Menu for each of them.

Menu Type

By default there are enabled two separate menus: Mega Menu and Off Canvas Menu [=] - sometimes called Hamburger Menu, because of used shape. You can use both or only of of them - as you want or need.
helix3-menu2

Off Canvas is indeed a external menu module - so if you want to use this area you have to create a menu module, set it properly. Remember to choose "offcanvas" module position for them.

helix3 menu3
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.

helix3 menu4

How to disable OffCanvas Menu in desktop

It pretty easily to disable Off Canvas [=] menu from desktop view only (!). Just select "Mega Menu" only here:

menu2

 

Menu Dropdown Width

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

Menu Dropdown Animation

MegaMenu offer four transition options for your dropdown submenus:

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

This is the transition that occurs when the submenu is opened. To have the submenu appear with no fancy effect, set this to None (No Animation).

 

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 reduce space in submenu

To reduce space (paddings) in all submenus, also between submenu items please use following custom CSS code:

 .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {padding:10px;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a 
{padding: 4px 7px; } 

 

Off Canvas Menu Customization

To change color of Off Canvas (mobile) Menu icon [=] (which may be white or black by default) you have to use following custom CSS code :

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

In this example we chosen red, but of course try with other name or hex colors.

To change color of Off Canvas menu items, please 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 use custom CSS code in templates based on Helix3? Read here >>here<<.

 

How to add background color / image to Dropdown Menu area

First you have to know that it request a custom CSS code. But besides it's pretty easy.

Please use following CSS code:

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

To add background image as well, 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(http://domain.com/images/menu_bg.png) no-repeat scroll 0 0 / cover;
}

 

 

You can declare the background of an element to be a solid color in CSS or image, but you can also declare that background to be a gradient. 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;
}


Search in Off Canvas Menu

Probably you're wondering how to add search module inside Off Canvas Menu. It's quite easy. All you have to do is:

  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

Using this same steps you can also publish there any other module(s). But please remember that Menu should be the most important part there, so put it as a  first or second position in the module order.

Newsletter