Here is the front-page of Off-canvas. You can use Off-canvas as menu system on small screens like mobile and tablet. The very first step is enabling the Off-canvas. Go to your template style manager, open the Add-ons tab. Now enable Off-canvas. Next, open the layout configuration. You see Off-canvas sidebar, it loads modules from off-canvas position. You can change position if you want. Next, assign modules to the “off-canvas” position. Open modules you want to display in Off-canvas, assign to “off-canvas” position, and select to display in all pages then save setting. Let’s check front-page. It works like a charm.

Back to back-office, we will change effect for the Off-canvas. There are a lot of effects, please try one by one till you got the one you expect. Now, save the setting and check front-page.

In case you want Off-canvas to be your menu system in small screens, you should disable the Collapse navigation for small screens. Next, disable the module assign to “off-canvas” position then create menu module, assign to “off-canvas” position and select to display in all pages. Let’s view front-page in small screens. It works perfectly.

You can change the sidebar icon. Open the off-canvas.php file in the tpls/blocks folder. Here is the icon of off-canvas sidebar, it uses Font awesome 4 icon. You can replace it with any Font awesome 4 icon. Open font awesome 4 icon page, select icon you want, copy it and replace with default off-canvas icon. Save the file and check front-page. See, icon has been changed.

Now we will move Off-canvas to right side, open the off-canvas.php file again, change the value of data-post from LEFT to RIGHT then save the file, reload front-page. Great, Off-canvas has been moved to right side but the button is still in right side so we have to move it to right side also. Open firebug, ok, add style to move the button to right side. Great, button is moved to right side, now track file to add the style, it’s in off-canvas.less file, open the file, change the style as we did in firebug. Save the file. Everything is done and it also bring us to the end of the tutorials today.

For more video tutorials, please check more videos at: http://www.youtube.com/user/JoomlArt

Thanks for watching.