How to set modules in the offcanvas of DJ-MegaMenu?

How to set modules in the offcanvas of DJ-MegaMenu?



In this tutorial I’ll show you how to create and publish module in the offcanvas of DJ-MegaMenu. I assume that you already know a bit about this extension, how to use and manage it. If it is not, then I invite you to read: documentation of DJ-MegaMenu
What is offcanvas menu? How can I set it?
I assume that you have a menu that looks something like that:



Offcanvas menu is a menu that is displayed in the sidebar. It is especially useful in responsive views, where the width of the screen is narrow (typically for a mobile devices). Thanks to the sidebar menu, we are sure that the menu will be visible, and navigation through the website will be easy and comfortable.
How to set it? Go to the Extensions-> Modules-> Your DJ-MegaMenu module



Go to the "Mobile Menu Option" tab.



Mobile Menu- choose Offcanvas Menu
Mobile menu trigger width- type the screen width (in pixels) below which the usual menu will change to offcanvas menu.
Click save and close. Your menu in a given screen width should looks like that:



Now I'll show you how to create your own modules in offcanvas menu.
There are two module positions built in DJ-Megamenu:



dj-offcanvas-top / dj-offcanvas-bottom - these are standard module positions and you can use them for any type of modules
Go to Extensions-> Modules-> Your module and set position to "dj-offcanvas-top" or "dj-offcanvas-bottom". Don’t worry if you can’t find these names in the list of available positions, these are internal positions of the DJ-Megamenu and probably won’t be on the list of template positions. Just type the name of position and press Enter.



Remmeber to save module settings.
Congratulations! In this way you can publish any type of modules in the DJ-Megamenu Offcanvas menu. Example:




      • Related Articles

      • Color customizer in DJ-MegaMenu

          A new feature in DJ-MegaMenu allows you to customize the look and feel of your menu. We've added the option to modify the menu's colors the way it'll look exactly as you need. Color customizer is available only in the FULL version of DJ-MegaMenu ...
      • Module options

        DJ-MegaMenu module is necessary to display the menu in the module position.  Navigate Extensions > Module Manager and choose the DJ-MegaMenu module. Let's take a look at Module Parameters: Menu Name – The name of the menu (default is main menu) Base ...
      • Options in menu item

         Remember to enable the DJ-MegaMenu system plugin, it will display an additional parameter tab in the menu item form. Let's see the available options in the menu item. Hide item name - yes/no Show menu item in - choose to show menu item in mega menu, ...
      • How to place a banner/adsense into DJ-Classifieds

        DJ-Classifieds has built-in module positions allowing you to put banners (for example, with Google AdSense advertisements) in particular places. Once your template settings allow for displaying module positions (to do so you need to go to your ...
      • Overview DJ-MegaMenu

        DJ-MegaMenu is an advanced menu system for Joomla 3 that allows you to set each menu item as you want. You can set the number of columns per each menu item, as well as put the modules inside. Learn more about ...