A good navigation menu can hugely improve your website user experience. If your site does not have an easy to use navigation menu system, then your customers will most likely get confused and leave to your competitors. Keeping your site navigation menu as simple as possible, will increase your customer satisfaction and make them come back to your site for more.

JF Mobile Bar is a complete mobile navigation solution for Joomla. It can either partially or completely replace your Joomla template's own header or menu. It offers your mobile visitors a flawless browsing experience that is tailored specifically to small screens. This unique Joomla tool can also work on tablet or desktop browsers.

It is quick, reactive and super comfortable to use. It supports the most popular Joomla extensions EasySocial, JomSocial, Community Builder and Kunena Forum. In this article, you will learn each element of the beautiful JF Mobile Bar.

Super-Easy Setup

The module installs as any other standard Joomla module. We suggest to publish it on one of your template's bottom positions. For example, on the debug. Almost all standard Joomla templates have this position. It will work though on any position because module's CSS styling position is a "Fixed" type.

Note: to enjoy the JF Mobile Bar module's Live Demo, you need to view it through mobile device browsers.

Login Module for Joomla

One of the most significant features of this module is that it is also a Login Module. It has a very beautiful looking login panel which smoothly appears after you tap on a small Floating Action Button (FAB) at site's right-bottom area. Login panel's background image and the logo are easily changeable in Joomla Module Manager.

Configuration Options

JF Mobile Bar has a lot of options. Open it up in Joomla Module Manager. On the Configuration tab, you can set up redirection pages for logins and logouts. You can also set up login panel's default state: Opened or Closed (default setting).

You may change the default background image and the logo. Or choose a 3-rd party extension integration (JomSocial, EasySocial, Community Builder or Kunena). Or choose on which device type the module will get displayed: explicitly on Mobile, Tablet, Desktop, or on all of them.

You can here edit as well FAB button icon or add your own "Custom HTML" content to each panel section of the module:

Toolbar and FAB button

Once you logged in using the JF Mobile Bar Joomla mobile login module, you will see the FAB button. It will display the default icon or the user profile image with the red notifications bubble (if the relative 3-rd party extension integration is enabled).

If you tap on the FAB button, it will expand the main toolbar. If you tap on it once again, it will display the Center Panel section. The toolbar buttons parameters are easily editable in the Module Manager:

Center Panel Section

As you just learned, the Center Panel section can be opened through FAB button when the toolbar is visible/opened. It shows a 3-rd party extension profile avatar images, notifications, and user profile links:

In Center Panel section you can also easily add your own custom menu items and set up their icons and text:

Left & Right Panel Sections

Left Panel and Right Panel layouts are similar. The only difference is the direction of the panels. Using these panels, you can also apply your Joomla menu items and your own custom HTML content:

Support for EasySocial

JF Mobile Bar module supports one of the most popular social networking Joomla extensions - EasySocial. Firstly, make sure the EasySocial integration is enabled in the module settings. It will then show (in the Center Panel) settings for EasySocial user profile avatars, points, links to user profiles and "Edit Profile" and the System/Friends/Conversation notifications:

Support for JomSocial

JF Mobile Bar also supports another popular social networking Joomla extension - JomSocial. As in the previous case, after enabling JomSocial integration, you will see settings for JomSocial user avatar images, badges, user profiles and notifications:

Support for Community Builder

JF Mobile Bar integrates with Community Builder. As in previous extensions example, this module integrates with Community Builder user avatar images, user profiles, and notifications:

Support for Kunena

As one of the best Kunena templates developer - JoomForest team didn't forget about Kunena Forum extension. Our awesome Joomla mobile navigation module can also display Kunena user profile avatar images and user rank badges:

Easy to Change Color Styles

By default, this beautiful Joomla mobile toolbar uses material design icons. However, with its relative fields, you can attach to it any other fonts stylesheets, for example, Font-Awesome. With just a few clicks you can quickly change the colors of every single element. You can add your own Custom CSS styles, attach Font Stylesheets and add your own background image for "Login Panel":

Supported Browsers

JF Mobile Bar module doesn't depend on your device. It works well with browsers supporting CSS3 animations: latest Chrome, FireFox, Safari, Opera, IE11+, Edge 14+, iOS Safari 9.2+, Android Browser 4.4+ and Chrome for Android 59+.

Conclusion

JoomForest, the best Joomla Templates developer, created the JF Mobile Bar module. It is a handy tool helping you provide to your Joomla mobile visitors an easy navigation. Designed and built with smart phones usability in mind, extremely clean, thoughtful animations offer numerous customization possibilities, which can serve as a complete mobile navigation and header solution for any Joomla website.