There is not a whole lot that needs to be done out of the box to set RokNavMenu up on a RocketTheme template. A lot of what RokNavMenu adds to Joomla is done on the backend by taking the standard Joomla menus and adding additional features and details you can customize to meet your specific needs.
In this tutorial, we will take a look at some of the options available to you through RokNavMenu, as well as some of the most important options you should be aware of when setting up a new site.
In order to make our templates easy to use, we baked RokNavMenu in and made many of the core controls accessible using the Templates Manager. The Menu tab gives you direct access to options that impact the main menu for your site. This includes: Where it appears on the page, the responsive menu type, and more.
Show: Enabling this option enables the main menu on the frontend. If this is turned off, the menu will not appear as assigned.
Type: This option allows you to select the menu type. Types such as Dropdown and Splitmenu change the way the menu works on the frontend. Some templates may include Fusion in lieu of Dropdown, and others may also offer Spicemenu.
Menu Numbering: Enabling or disabling menu numbering is done via this option. This option is not present in all templates.
Select a Menu: The Joomla menu you select here will be the source for the main menu.
Position: This is where you select a module position to assign the main menu to.
Responsive Menu: For smartphones and tablets, this option determines how the menu will appear.
Enable ID: You can enable or disable the default Joomla menu ID through this setting.
Module Cache: This setting turns on or off default module caching for the menu.
Individual menu items can be edited from Admin -> Menu -> Menu Name -> Menu Item. In the Advanced Settings area of the editing page, you will find a set of options for each supported menu type. Typically, this includes Dropdown and Splitmenu. Here, you can refine how a menu item appears in a RokNavMenu menu.
NOTE: These options will only appear if the RokExtender extension (part of RokNavMenu) is enabled. Also, these settings will only appear when a Gantry template that supports these options has been set as the default template. When switching to another template, these options may have to be reconfigured for the new template.
The Dropdown Menu is an advanced CSS driven dropdown menu system. It offers advanced structural features such as multiple columns, inline icons and text, inline modules and positions, custom column widths, item distribution and menu offset. All of these are configurable for each menu item.
Subtext Line You can post a second line here
Menu Image The image that appears in association with the menu.
Menu Icon You can opt to use an icon from Font Awesome to add a visual element to the menu item using this field. For example:
Custom CSS Class This field allows you to add a custom CSS class to the menu item.
Columns of Child Items This setting gives you the ability to choose to have one or more columns for child items.
Item Distribution You can choose to distribute child items Evenly, In Order, or Manually. As an example, seven items in three columns distributed Evenly is: 3,2,2. If these were done In Order, it would be 3,3,1.
Manual Item Distribution This is the comma-separated count of rows in each column. Example: 3,2,2.
Drop-Down Width This is the width of any dropdown column (in pixels).
Column Widths For multiple columns, this is the width (in pixels) of each column. Example: 100,150,300.
Group Child Items You can select whether or not to group children under the menu item rather than as a submenu.
Child Item Type Allows you to select the type of child item. This can be Menu Items, Modules, or Module Positions. Modules and module positions allow you to embed modules within the menu itself.
Dropdown on Large Enables you to determine the direction a dropdown child menu section drops to on a large screen.
Dropdown on Desktop Enables you to determine the direction a dropdown child menu section drops to on a desktop screen.
Dropdown on Tablet Enables you to determine the direction a dropdown child menu section drops to on a tablet-sized browser window.
Splitmenu is a static menu system that displays 1st level items in the main horizontal menu and further children in the Sidebar.
Subtext Line: You can post a second line here.
Menu Icon: You can opt to use an icon from Font Awesome to add a visual element to the menu item using this field.
Custom CSS Class: This field allows you to add a custom CSS class to the menu item.
We designed RokNavMenu to work with most templates, even ones that do not include the Gantry framework. While you might not be able to take advantage of the Templates Manager setup for the main menu in these instances, you can still use styled RokNavMenu modules to extend the features and functionality of the core Joomla menu.
To create a new RokNavMenu module, you need to navigate to Administrator -> Extensions -> Module Manager -> New and select RokNavMenu as the module type. Here, you can configure the menu module to meet your needs.
Title: Every module must have a title. This title should be easy to remember should you need to adjust the menu settings in the future.
Show Title: Allows you to show or hide the title assigned above.
Position: This is the position you wish to have the RokNavMenu module appear.
Status: The module can be Published (live), Unpublished (hidden), or Trashed.
Access: Allows you to determine who has access to the module. If this is your main menu, it should be Public.
Ordering: Selects the ordering option for the module.
Start Publishing: Allows you to set the module to be moved to a Published: status at a specific date.
Finish Publishing: Allows you to set the module to be moved to an Unpublished: status at a specific date.
Language: Assign a language to the module.
Note: An optional note that appears in the module list (todo tasks, etc.) This note only appears on the backend.
Select Menu: Selects a menu to assign to the module. (Example: Main Menu)
Limit Levels: Allows you to choose whether or not to limit the levels that appear in this menu.
Start Level: This is the level to start rendering the menu at. If you set the Start and End levels to the same level, and set the Show Sub-Menu Items option to Yes, only one level will appear in the menu.
End Level: This is the level to stop rendering the menu at.
Show Sub-Menu Items: Allows you to make sub-menu items available through an expanded menu.
Themes: This is the theme you wish to have the menu rendered in. For example: Fusion, Dropdown, or Splitmenu.
Menu Tag ID: This is an optional ID attribute to assign to the root UL tag of the menu.
Menu Class Suffix: This is a suffix to be applied to the CSS class of the menu items.
Module Class Suffix: A suffix to be applied to the CSS class of the module. This allows for individual module styling.
Caching: Select whether to cache the content of this module.
Cache Time: This is the time between module recachings.
Module Tag: The HTML tag for the module.
Bootstrap Size: This option specifies how many columns the module will use.
Header Tag: This is the HTML tag for the header/title. It affects how the title of the module appears, if the title is set to Show.
Header Class: The CSS class for the header/title.
Module Style: Use this option to override the template's style for its position.