Helix Menu System - Basic settings

Advanced Menu System includes:

• Megamenu - from few years is the latest trend for site navigation. Refer to drop-down menus that contain multiple columns of links. This kind of menu may be able to improve navigation and usability. The information architecture of your navigation can be made clearer and is visible all at once.
• Dropline Menu - turns nested menu items into a horizontal drop line menu, with each sub menu appearing as a single row of links beneath its parent menu.
• Split Menu - where different levels of a single menu are displayed in two or more locations on a single web page.

- using which you can design such a sophisticated website that will leave the browsers stunned. To set your desire menu type go to Extensions->Template Manager. Now click on a Helix framework based template and then click on Menu tab. Here, you'll see all options for Helix menu systems. At first, select the menu that you want to show your main navigation. Then select menu type from available 4 types if menu.

Here, you'll see all options for Helix menu systems. At first select the menu that you want to show your main navigation. Then select menu type from available 4 types if menu.

Drop Down Column Width

Here you can set the width of the columns in the dropdown menu in pixels. When you set it to e.g. 200 and you set your dropdown menu to have three columns, the dropdown menu will be 600 px wide. Individual column width of dropdown menu can be changed via helix plugin.

Show Menu Image

If you want to show menu item image then set the option as "Yes" and select the Menu image type.

Initial X and Y Offset

Set the X-Offset and Y-Offset of the first level drop-down menu in pixel.

Subsequent X and Y Offset

Set the X-Offset and Y-Offset of the second or higher level drop-down menu in pixel.

This tutorial is a step-by-step guide to lead you through the settings of mega menu. First, select Main Menu and from Menu Settings set the Menu Type as Mega menu. and select the menu module that you want to show as your horizontal navigation

Now have a look at the menu tree that we are are going to manipulate.

How to add icons into menu items

By default JoomShaper templates use of colors, highlights and mouse-over effects simplifies detection of the items that are being searched by the user. The use of icons instead or beside menu items names is a useful alternative that favors a quick visual option identification. One of the features of a Mega Menu style is the ability to add icons to your menu items.

If you want to add icons to your menu, you first have to upload your favorite icons to the your_site_root/images (or create a new folder for icons) folder.
It's recommended to use image with transparent background (.PNG/.GIF) and sizes must not exceed 16x16 pixels; it is a MUST if you want to avoid layout breaks. Advanced users can make it happen by customizing menu style classes.
In the next step, from the administration option of your website, navigate to Menus - Main Menu, and then click on any menu item to add suitable icon for it.

• Step 1 - For Joomla! click the Parameters (System) tab and Joomla click on Link Type Options tab.
• Step 2 - For Joomla! select your desired icon from the select drop-down box and for Joomla browse and select a Link Image.
• Step 3 - Now click the Save button to apply these changes.

How to use Multi columns in the Mega Menu

Using a megamenu enables you to show your web site visitor many related navigation options in just one click. One of the features of the megamenu is the ability to create multiple columns in the dropdown menu.

We are highly privileged to present to you the Features menu item structure. Take a closer look at the menu structure on the left side and the front end view on the right side; it gives you options to edit some more menu parameters:

The columns, as marked, give options for changing Explore menu item parameters to show up its child menu items in the frontend properly. You can customize it by clicking this menu:

• Step 1 - click the "Helix Mega Menu Options" tab to edit the megamenu parameters
• Step 2 - set the column number at 3, it applies to each menu item: Features, Menu Showcase and Custom HTML
• Step 3 – customize the width for the entire child content area
• Step 4 – customize the width for each column to make it look more appealing
• Click the Save button, go to frontend, refresh the page and see the changes

Menu items will have no Mega Menu parameters if it is the first time you are enabling Mega Menu. Therefore it will look similar to a regular Moo Menu:

In the image given above, you can see the Features menu item showing four child menu items:

• Typography
• Module Positions,
• Module Variations,
• Error Page

You have to edit each items to make it appear along with its child item; thus the contents of parent and child menu items will show up. You have to click the Features menu item to do it.

As the image given above shows- just selecting Yes for the Group option will group the Features menu item with its child menu items into a compact column to link with the parent menu item Features option appears at the top of the first column of the main menu item Joomla! Stuff.

Now you can do the same thing for the other two parent menu items,i.e. Menu Menu Showcase and Custom HTML.

How to add a module to a Mega Menu

Probably you might have seen that in our templates we have inserted some modules into the menu as objects. One of the features of the megamenu is the ability to include a module as a submenu item.  This guide shows the process of loading different types of modules as menu items. As you may know the module gives you wide range of possibilities to set up the menu you need. You can normally load any type of module you want as Custom HTML, 3th party or regular Joomla! modules. You can also load unique module positions you have setup for your modules, and positions that are not defined in your template. Just to show an example, we are going to load the default Joomla! Login Module as a menu item.

First go to Menu Item Manager of the Main Menu. Now click on the New button to add a new menu item, then proceed through the following steps:

Step 1: First of all you need to select Menu item type. In order to do so, click on select and then select suitable menu item type. In this example, we use menu type as Login Form.

Step 2: type in a Title for this menu item.

Step 3: click the Helix Mega Menu Options tab to open mega menu parameters;

Step 4: select Submenu Content type as module.

Step 5: scroll down and select Login, this is the module we are going to load.

Step 6: save changes. Now on the front-end you should see new your module(s) inside the menu.

How to Font Awesome icons in the main menu

In Helix Framework we were fully integrated Font Awesome, which gives you scalable vector icons instead of standard graphic icons that can instantly be customized. You can optimize the various parameters of your icons with FA such as changing the font size, icon size, colors, margins, shadow, and anything that can be done with the power of Cascading Style Sheet (CSS). With over 360+ icons to choose from, the Font Awesome system is the perfect solution for today's web developers.

Helix Framework II and III use current version (v4.0+) of the Font Awesome collection set, you can check the used version under the following path of your installation: plugins/system/helix/css/font-awesome.css inside file content header. In the following steps we will show you how to add FA icons into any menu (also MegaMenu) for JoomShaper Joomla 3 templates:

Step 1: Go to Menu Manager and choose menu item where you want to add FA icon.

Step 2: Then choose "Helix Mega Menu Options" tab and inside "Add Custom Class" input field add your own class, for example "envelope".

Step 3: Now choose your favorite icon, you can view examples all 360+ of the Font Awesome icons and use this as a reference. We will use icon on menu by using css before or after property method. Please notice that not all icons might be implement because Font Awesome collection is still growing. Please open following file: plugins/system/helix/css/font-awesome.css - and find unicode of necessery icon.

Step 4: Now inside the custom css file please add the following css code:

a.menu-item.envelope:before {
  content: "\f003";
  font-family: FontAwesome;
  padding-right: 5px;
  font-style: normal;
  font-weight: normal;
-webkit-font-smoothing:antialiased; }

Upload or save a changed file – that’s all that’s required. Refresh your page, after few seconds you should see an icon from Font Awesome near your menu item.

Helix MegaMenu Generator

One of new features of Helix3 is new MegaMenu Generator. It can be used after first saving of menu item or in current menu items. But first check what you have it inside before that clicking.

• 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.

Once Menu item is saved you can check this tab again. You should notice a new advanced Helix MegaMenu Options. From here, you can select a module and drop inside this menu item as a submenu.

You can use module from list of published in Module Manager. It means that if you want to add a new one into menu, it must be listed there as a published, position name is not required to work.

You can choose column layout, which allows you to set menu items in selected positions. To get this feature use "Manage Layout" option (blue button).