JA Playmag template menu system

JA Playmag template supports 3 menu systems: Megamenu, Off-canvas sidebar and default Bootstrap menu on small screens.

It's easy to configure all the 3 menu systems. Please check how-to configure and customize menu system guide in the sections below:

When Megamenu is disabled

When Megamenu is disabled, the template will use Joomla dropdown menu. To disable Megamenu, open template style manager, in the "Navigation" tab, disable "Megamenu" option.

Menu is auto switched to Joomla dropdown menu.

When Megamenu is enabled

The image below is a sample of megamenu menu in JA Playmag demo.

First, enable Megamenu, select the menu that you want to display as main menu then hit the "Megamenu" button on the top bar to open Megamenu configuration panel.

In the configuration panel of Megamenu, select menu item/submenu/column/row to configure.

For more detail of how to work with Megamenu, please check out the references below:

• Megamenu options

  Show you how to use options in the Megamenu configuration panel like: how to enable sub-menu, how to assign module, how to add new column/row, etc

• Style megamenu

  Show you how to add style for a menu item, sub-menu, column or row in Megamenu.

• Add icon for menu item in megamenu

  Show you how to add icon for menu item in Megamenu: Font Awesome icons and Bootstrap icons.

• Animation configuration

  T3 supports multiple animation types for Megamenu: Fading, slide, elastic, room

• Video tutorials

  The video tutorial show you how to work with Megamenu configuration panel

Please note that, Megamenu only works on Large and medium responsive layouts. In Small and Extra small layout, it uses Off-canvas or Default Bootstrap collapsed navigation.

Off-canvas sidebar is a position that you can load any module to, not only Menu.

In JA Playmag demo, Off-canvas sidebar is used as Menu system on Small and Extra small layouts.

Follow the steps below to have off-canvas sidebar as Demo.

Step 1: Create menu module

From your back-end, go to: Extensions >> Module Manager and hit the "New" button to create new module. Next, please select "Menu" module type.

Next, configure the module, assign it to position "off-canvas".

Module position: off-canvas
Module Suffix: off-canvas-righ

Step 2: Configure Off-canvas in responsive layouts

Open template style setting panel you want to configure off-canvas. In the Layout tab, select Responsive layout, disable off-canvas sidebar in Large and Medium layouts.

Enable off-canvas sidebar in Small and Extra small layout.

Step 3: Disable Collapse navigation for small screens

The Collapse navigation for small screens is the menu system on Small and Extra small layout, it's dropdown menu based on Bootstrap menu style.

If you don't disable the Collapse navigation for small screens, you will have 2 menu sytems on Small and Extra small layout.

Configure Off-canvas effect

T3 supports multiple effects for Off-canvas sidebar. Open the "Add-ons" tab, enable Off-canvas then select the effect you want for Off-canvas sidebar.

Customize Off-canvas sidebar

The style of off-canvas sidebar is in the templates/ja_playmag/less/off-canvas.less file. You can also change icon for Off-canvas sidebar, change its position (from right to left).

Change sidebar icon

Open the file: templates/ja_playmag/tpls/blocks/off-canvas.php then find the following code:

<button class="btn btn-primary off-canvas-toggle <?php $this->_c('off-canvas') ?>" type="button" data-pos="right" data-nav="#t3-off-canvas" data-effect="<?php echo $this->getParam('addon_offcanvas_effect', 'off-canvas-effect-4') ?>">

  <i class="fa fa-bars"></i>

</button>

Now, to change icon of the sidebar, just change the icon class <i class="fa fa-bars"></i> to any icon you want. JA Playmag template supports Font Awesome 4 so you can use any Font Awesome 4 icon class.

Font Awesome 4 icon

<button class="btn btn-primary off-canvas-toggle <?php $this->_c('off-canvas') ?>" type="button" data-pos="right" data-nav="#t3-off-canvas" data-effect="<?php echo $this->getParam('addon_offcanvas_effect', 'off-canvas-effect-4') ?>">

  <i class="fa fa-home"></i>

</button>

If you don't want Off-canvas sidebar as menu system on Small and Extra small layout, you can use Collapse navigation for small screens instead of.

Here is the demo of Collapse navigation for small screens on JA Playmag demo.

Follow the steps to have same Collapse navigation for small screens

Step 1: Disable Off-canvas sidebar

We should disable the Off-canvas sidebar as we don't want to duplicate menu system on Small and Extra small layout. Open the "Add-ons" tab then disable the Off-canvas option.

Step 2: Enable Collapse navigation for small screens

Open the "Navigation" setting panel then enable Collapse navigation for small screens option.

Working in progress, please come back later.