How To Set Up Mega Menu Builder In Helix Ultimate Framework
4.8 (95%) 4 vote[s]

It's time to create new or re-design your websites to bring it to the next level.

Download 100+ Free Joomla! templates Download 100+ Free WordPress themes

A mega menu is a drop down interface which is displayed below a menu item when the user hovers over the menu item. It helps your Joomla website be more navigable. Helix Ultimate Framework allows you to easily build such mega menus on your Joomla website.

Inside each menu item, you can see new tab “= Mega Menu“. And inside “= Mega Menu” tab you will see several switchers, responsible for additional features.

mega-menu-basic-view Helix Ultimate

Image by Joomshaper

Mega Menu

Enable advanced Mega Menu option to create highly customized and creative mega menu configurations. It allows you to add and use row and column based menus, drag and drop the modules to the menu positions from the modules list.

  • Width – choose total width of submenu area.
  • Alignment –  choose submenu area alignment to the right, left, center, or set full width.

You can easily build a two or three columns sub-menu. So how to build columns for menu items using Mega Menu? Follow these steps:

1. Click “Add New Row” button (blue button)
2. Select Menu layout: There are 9 options for you to choose from, you can choose single row or rows with columns.
3. From top bar, click “Save” button.
4. Now you can see submenu items, if were added before. And you can also easily arrange columns, move elements or modules into another position, from one column into another using drag and drop function in Mega Menu. Or you can also select existing module(s) from the right sidebar and put into column.
5. Use trash icon to remove undesired row.
6.Remove undesired element by clicking “X” icon.
7. Click on “Save” or “Save & Close” button to save setting after all changes.

helix_u_menu                                                                                                                                Image by Joomshaper

Show Menu Title

By default, this option is enable, it allows you to hide Menu Title from menu, but alias in system will stay. It’s useful when you want to show only icon instead full menu item name, for Home or Search position.

Dropdown position

This option allows you to change dropdown submenu position to the left or to the right side.

Menu Icon

Mega Menu allows you to set icon for each menu item in your menu. You can use font icons based on Font Awesome v4.7, a huge collection of icons.
By default, the icon will be displayed to the left of the menu item text. If you want to remove the icon, just select the “Select” name and save settings.

Custom Class

This field is useful when your template has a particular menu location and it needs adjustment. You can place any custom class name here, the custom class name is already defined inside your Custom CSS code section. It allows you to add more than one class name, separated with space.

Badge in menu items

Helix Ultimate gives you the system to highlight your most important menu item(s) redirecting to any special page, service, product or announcement. Highlight your menu item(s) with name badges to draw your visitors’ attention to any menu item you want.

badges

Image by Joomshaper

  • Badge Position – choose badge name position to the left or to the right.
  • Background Color – allows you to select the background color for the badge item only.
  • Text Color – allows you to select the color for the badge item only. You should use different color than used for background color to keep necessary contrast.

That’s all! If you have any question about this tutorial, don’t hesitate to leave a comment below. And don’t forget to share with your friends if you find it useful! Thanks! ?

Looking for a free Landing Pages template to start creating your stunning website?

90+ Landing Styles (Onepage) for Joomla! 80+ Landing Styles (Onepage) for WordPress

eskişehir escort izmit Escort bursa escort bayan ankara escort bayan van escort bayan elazığ escort bayan erzurum escort bayan
[Summer Sale!] Get 50% discount for your purchase on today! Limited 24 hours, don't miss! Get Coupon Code
[Summer Sale!] Get 50% discount for your purchase on today! Limited 24 hours, don't miss! Get Coupon Code