One of the new features of our Premium Joomla! templates is the option to add a subtitle to any module. Inside the module settings, just add the subtitle by separating the title and the subtitle with a "|" (pipe) character:
This feature will add a short description (subtitle) under the module title:
The subtitles can be further customized using the template settings, with custom parameters for the color, font size, line height, padding, Google Font family, Google Font weight, Google Font style, text align and text transform for the subtitles of the modules.
The module subtitle is an optional feature. If you do not want to use a subtitle, just use the module's title field without the "|" (pipe) character.
Use the Bootstrap3 classes named
.pull-right with our
favth- prefix to position horizontally two or more modules using the same module position. To use them, insert the name of the class inside the Module Class Suffix field inside the Advanced settings of the module:
Please don't forget to add the "favth-" prefix before any of these names (ex: favth-pull-left).
For these classes to work, you need to insert a space before the name of the class (by pressing the spacebar key from your keyboard). Also, don't use both of them at the same time for the same module.
We customize the extensions for each template with unique styles which can be replicated inside the template by adding the FAVSTYLE Module Class Suffix inside the Advanced settings of the module.
favstyle Module Class Suffix will replicate the custom styles for the extensions. To remove the custom styles for the extensions and revert them to their default look, simply remove the
favstylesuffix to work, you need to insert a space before it (by pressing the spacebar key from your keyboard).
Use the Bootstrap 3 classes named
.hidden- with our
favth- prefix to hide/show different modules for desktop, tablet or mobile. These responsive utility classes are:
The screenshot is taken from the Bootstrap 3 official documentation, so please see the original source for the responsive utility classes documentation.
Please don't forget to add the "favth-" prefix before any of these names (ex: favth-hidden-xs).
To use the visible and hidden classes, insert the name of the class inside the Module Class Suffix field inside the Advanced settings of the module:
For these classes to work, you need to insert a space before the name of the class (by pressing the spacebar key from your keyboard).
Assign your main navigation menu module to the NAV module position which is a special module position designed to be used only for the main navigation:
Being responsive, the main navigation adjusts to desktop, tablet and mobile with 3 different layouts. The tablet layout for the main navigation usually stacks the logo and main navigation on top of each other. The mobile layout for the main navigation uses Bootstrap's collapsing navbar and has both a dark and a light version:
If you want the parent mobile menu elements to be collapsible, the parent menus (ex: the "Features" menu, in our demo) should be menu type "Menu heading" or "External URL" with "#" configured as the URL. Otherwise, if you parent menus have actual active URLs assigned to them (internal or external), the URL will be triggered before the menu can have the chance to collapse.
By default, the mobile menu uses the same content as the main menu on desktop. Since the desktop menu has usually a much more complex content structure than what the mobile navigation can handle, having the option to use two different menus for mobile and desktop can be really helpful.
This is why we created the
navmobile module position, which can be used to create a separate menu module that will be active only on mobile and will have its own menu content, different from the one on desktop.
navmodule position and the mobile navigation will include by default the same menu content as the one for desktop.