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

 

Alignment

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.

Alignment

 

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

 

Icons

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 http://fortawesome.github.io/Font-Awesome/icons/.

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

 

Captions

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

Item captions

 


Questions & Comments