Better Navigation for Joomla Sites with JF Mobile Menu

: Published: 18 July 2016 18 July 2016

JF Mobile Menu is a free multi-level push menu module for Joomla. It also works on desktops.

One of the main features is that you can apply "Font-Awesome" icons or custom images for your selected menu items, The module's color styling is fully editable through the Module Manager.

In this tutorial, we will show you how this module works. Let's start.

Step #1. Download & Install JF Mobile Menu

You can download JF Mobile Menu from this page. You need to create an account and login to access the download link. Don't worry, the registration is free.

Then install it from Extensions > Manage > Install.

Step #2. Create a JF Mobile Menu Module

Go to Extensions > Modules > New > JF Mobile Menu.
Choose a module position. We recommend the debug if it is available in your template.
Set Show Title to Hide.

Step #3. Choose Your Desired Menu

JF Mobile Menu module works similar to the native Joomla Menu module. By choosing your desired menu, the module will automatically show a multi-level sidebar push menu on the frontend.

Note - In your menu manager, the parent menu items type must be a Text separator if you want those to show their respective child menu items with a click.

For example in this screenshot, the "Typography" Menu Item is a "Text Separator" type and on-click it will show its sub-menu items with a beautiful sliding effect. If the "Parent Menu Item" will be a different type than "Text Separator" is, then on-click it will just navigate your web-browser on the relevant web-page.

Step #4. Enable Font-Awesome Icons

"JF Mobile Menu" module requires Font Awesome icons. If your Joomla template is not already loading it, then you need to enable it by setting Font Awesome to Yes.

Step #5. Choose on Which Device to Show the Module

JF Mobile Menu can be visible on any devices: desktops, tablets, and mobiles. The module uses the well-known "CSS3 Media Queries" to make visible on any devices you want.

Step #6. Choose Icons or Images for Your Menu Items

One of the main features of JS Mobile Menu is that you can select any menu item you want and to apply to it custom icons or images. All you need it just to select your desired menu item and type a "Font-Awesome CSS class" or to upload a "Custom Image".