0
Cart Empty
0.00 (0 votes)

The EF4 Framework comes with the off canvas sidebar which you can use to display any module. It can be useful for many purposes. The most popular one is using the off-canvas sidebar to display a vertical menu for mobile pages instead of the horizontal menu which usually is the default one for desktops.

How to display the off canvas sidebar in Joomla template?

You can display the sidebar in few easy steps.

Step1: Enable the off-canvas setting.

Go to Extensions -> Templates -> Styles -> [template_name] -> Basic Settings


How to display the off canvas sidebar in Joomla template?

In the Basic Settings, you can also specify the sidebar width and position.

Step2: Publish a Joomla module.

Publish a module on the "offcanvas" module position. It is a built-in Joomla module position in the off canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type "offcanvas" as the module position name:


How to use the off-canvas sidebar in EF4 Framework

Step3: Publish the off-canvas toggle button.

It is a button which opens and closes the off-canvas sidebar. You can add the button in two ways.

Using custom HTML code

In our older Joomla templates, we used a custom HTML code to display the off-canvas toggle button. You can use a custom HTML Joomla module for that purpose and simply paste the following code into the module:

<a class="toggle-nav menu"><span class="icon-align-justify"></span></a>

More about how to display a custom HTML module.

Using JM Offcanvas Button module

Another way is using the JM Offcanvas Button module. It is a free module that you can download from your account at Joomla-Monster.com.


How to use the off-canvas sidebar in EF4 Framework

The module with the off-canvas toggle button you can display on any module position in your template. A good idea is to place the button somewhere at the top of a Joomla template.

How to use the off canvas sidebar as the mobile menu?

Let's assume that you want to display the off-canvas sidebar as mobile menu. Let's take a look at the steps you need to take:

Step1: Hide the off-canvas toggle button for desktop users

We want to display the off-canvas sidebar for mobile users only, so we need to hide the toggle button for desktop users. You can do that by adding the following module class suffix to the module parameters:

visible-phone


How to use the off canvas sidebar as the mobile menu?

More about Bootstrap utility classes to show and hide modules.

Step2: Hide the main menu for mobile users

Next step is to hide the main menu for mobile users because we want to use the off-canvas sidebar menu for that purpose. The main menu is usually displayed in the top of the template. If you are using a Joomla-Monster template, it will probably be the DJ-Menu or DJ-MegaMenu module published on the "top-menu-nav" module position. In the menu module parameters you need to add the following module class suffix:

hidden-phone


How to use the off-canvas sidebar in EF4 Framework

If you are using a DJ-MegaMenu module as your main menu, you should also disable the mobile menu in that menu, because we do not need it this time.


How to use the off-canvas sidebar in EF4 Framework

NOTE: Please note that DJ-MegaMenu has its own mobile menu which you may find very useful. Beside the off-canvas menu, there is also a possibility to display a simple select menu or more advanced accordion menu for mobile users.

Step3: Publish a menu module.

The last step is to publish a Joomla menu module on the "offcanvas" module position. Simply, go to Extensions -> Modules -> New -> Menu. Select the main menu and type "offcanvas" as the module position name:


How to use the off-canvas sidebar in EF4 Framework

Users' reviews

Total rating: (0 votes) Add review

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2017 Joomla-Monster.com All rights reserved. Joomla! is Free Software released under the GNU/GPL License.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. Joomla-Monster.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

You will Get best support ever!

Do you know that besides high-quality templates
& pro extensions given for FREE 
our customers appreciate the excellent support

Check here why :)