Navigation and Mega Menus

Accessing the mega menu

Make complex menus easily with T3's mega menu system which can be accessed by the Megamenu button.

The Megamenu configuration screen allows you to click menu items and assign classes and align, group, or create drop down menus. Let's go through some of the more common tasks:

Hiding the drop down menu

Levels of the dropdown menu can be set individually to display or hide. This is very handy of you want to hide the nested menu items but still have them exist in the menu structure of the website. Select the top level menu item and toggle the Submenu switch.

Displaying the submenu


Hide when collapse

Visibility of the submenus can be determined using the Hide when collapse toggle switch. Use this setting to hide a drop down sub menu on a mobile device or small screen. If you choose to display the sub menu on a small device then keep this toggle set to Yes and input a desired width for the submenu item.

Hide when collapse



The drop down menus are a powerfull part of the T3 framework, and can be configured to display in rows and columns. Select the outer most box of the drop down menu until it's border appears in blue. Select one the alignment icons.



Drop down menus can be centered, aligned left and right, or span 100% of the container.

Alignment options


Add a new row or column

Add a new row or column by clicking the drop down menus outer most container, and clicking the add column icon. 

Adding columns & rows


Inserting modules

Modules can be displayed inside the mega menu. Create a new column and click its container to highlight it. Then select a module from the drop down selector.

Inserting modules


Extra classes

Various menu items can be assigned addtional classes by selecting the menu items and typing a class name into the input field. This is handy to style menu items individually in the template.less file.

Extra class



Assign icons to individual menu items by typing in the bootstrap framework class for the icon you wish to display into the icon text input. Class names for each icon can be found at

The icons are vector based allowing you to resize them with CSS and have them maintain their proportions without becoming pixelated.

Assigning an icon to a menu item



Insert text into the item caption field to display a line of text directly within the menu item.

Item captions


Questions & Comments