Better Navigation for Joomla Sites with JF Mobile Menu

| Joomla
Joomla JF Mobile Menu

JF Mobile Menu is a FREE multi-level push menu module for Joomla; the module 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,. Also, the module's color styling is fully editable through Module Manager.

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

Please take a second to preview the JF Mobile Menu by clicking here to see what result you can get.

  • Click on the mobile icon to see how it would look in mobile.
  • Then click on nav burger icon to finally see the JF Mobile Menu in action.

JoomForest Demos JF Mobile Menu

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 "debug" if available in your template.
  • Set Show title as "hide".

image

Step #3. Choose your desired menu

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

image 2

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.

image3

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".

image4

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.

image5

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". 

image6

Step #7. Customize the colors for your menu

Also as we mentioned, menu styling is fully editable; you can change colors and make it fit to your website brand. 

image7


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.