Megamenu configuration
T3 supports Megamenu, that allows you to display your menu flexiblely. Arrange menu items in columns, adding any content to menu ...
Please note that, the navigation settings are not global settings, that means in each style, it can have difference navigation. In each style, you can display different menus as main menu.
To enable Megamenu, please open Navigation tab. Enable Megamenu> option then open Megamenu configuration panel.
Configuration Level
There are 3 levels of configuration that you should know
- Submenu setting
- Column setting
- Menu item setting
1. Sub-megamenu setting
This setting allows you to configure the width of the sub-megamenu, add column, and add class that style for it.
2. Column Setting
In this level of configuration, you can: Add column, remove column, set width of column, assign module to column.
3. Menu Item
In this level of configuration, you can: enable or disable submenu if a menu item, display sub-menus in group or not, move menu item to right or left, assign a module to a module menu item, add icon for menu item.
Megamenu options
Enable Submenu
This option is to show or hide submenu of a parent menu. If a menu does not have submenu, when you enable this option, it allows you to add new submenu and add content to the submenu.
To add submenu, click on menu that you want to add submenu (you can only add submenu for a menu that has no child menus).
Add new column/row
You can add new column or row for a selected column/row.
Group submenu or not
You can group submenus of any menu item by selecting the menu item then enable option "Group".
Assign any module for new created row/submenu
After adding new row/submenu, you can display content from any module by assigning the module to the row/submenu.
Move menu item
You can move a menu item to next or previous column. This option will help you to devide menu items into columns.
Resize submenu and column width
T3 allows you to change size of submenu. Select the submenu then change its size in pixel.
After changing size of the submenu, you can change size of a column, select the column and set the Width (total is 12).
Style Megamenu
You can style for any level of Megamenu: menu item, column, submenu by adding a class to Extra Class field.
There are 2 files that you should add style for MegaMenu.
megamenu.lessin:plugins/system/t3/base/lessmegamenu.lessin:templates/t3_bs3_blank/less
Add icon for menu item
You can add class to define icon that you want to add to menu item, or you can use classes of Bootstrap and Font aweasome.
Let's check front-end
Animation settings
T3 supports 4 animation types for Megamenu. Please keep in mind that this feature is only available from version: 1.2.5
There are 2 fields for animation configuration: Animation type and Duration.
Currently, T3 supports 4 animation types: Fading, Slide, Elastic, and Zoom.
Video tutorials
These are video tutorials for Megamenu configuration and animation setting for megamenu.
Megamenu configuration
This is the video tutorial for Megamenu configuration, you will learn how to build up a Megamenu, how to use Megamenu settings effectively, how to add icons, how to style menu item with our T3 Framework
Still have trouble?Adding Animation Effect for Megamenu
In this tutorial, you will learn how to add animation effect for Megamenu. There are 4 animation types, for each animation type selected, you can set the duration for that effect when you hovering or change menus
Still have trouble?Sticky main menu
Sticky main menu, also known as fixed menu is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll.
Steps to make main menu sticky:
#1: add "data-spy" class
Open the file templates/t3_bs3_blank/tpls/blocks/mainnav.php the replace the code:
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">
with:
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav" data-spy="affix" data-offset-top="70">
#2: add style for the sticky menu
Open the templates/t3_bs3_blank/less/navbar.less then replace the style rule:
.t3-mainnav {
border-left: 0;
border-right: 0;
margin-bottom: 0;
border-radius: 0;
with:
.t3-mainnav {
border-left: 0;
border-right: 0;
margin-bottom: 0;
border-radius: 0;
left: 0;
right: 0;
top: 0;
z-index: 999;
Once it's done, please compile LESS to CSS.
Small screens menu system
T3 supports 2 navigation systems for small screens, the first one is the default Bootstrap navigation called Collapse navigation for small screens, the second one is the Off-canvas sidebar. Check out Off-canvas sidebar configuration documentation
To enable default Bootstrap navigation, in the Navigation tab, enable option Collapse navigation for small screens.
Front-end Appearance.
Note: We suggest you to disable this option if you use Off-canvas sidebar for navigation in small screens.
Off-Canvas sidebar configuration
The new Off-Canvas sidebar is now independent with Collapse Navigation for small screens. The Off-canvas sidebar displays content from a defined position.
Enable Off-canvas sidebar
To enable Off-Canvas sidebar, open Add-ons tab then enable Off-canvas sidebar.
Assign a module position to Off-canvas sidebar. By default, Off-canvas will be assigned to off-canvas position.
Add content for Off-canvas sidebar by creating modules then assign them to off-canvas position.
Front-end Appearance
To display menu in off-canvas sidebar, create module menu then assign the menu to "off-canvas" position.
Use Off-canvas as Navigation in small screens
In case you want to display Off-canvas sidebar as navigation in small screens like tablet, mobile, please disable Off-canvas sidebar in responsive layouts.
Front-end appearance
