JW Template uses the Joomla native module navigation (mainmenu) in conjunction with a special layout.
Create main menu
In Joomla 3.X the main menu is stored in the standard position in the module position "position-7". Navigate menus -> Manage menus to the main menu and change the module position to "yes-mainnavigation". Then, under Layout, select the layout of the same name.
Create sidebar menu (offcanvas)
The sidebar menu has to be created completely separately, so in the sidebar you can another menu than in the main navigation.
Create a new main menu module (mainnavigation) and select the menu to be displayed. Save this mobile in the module position "jw-offcanvas" and select the layout of the same name.
You can now make the following configurations in the template under the Navigation tab:
When the menu is collapsed, select the Bootstrap Media Breakpoint and the Mobile menu will appear.
- navbar-expand-sm (display on small devices)
- navbar-expand-md (displayed on medium devices)
- navbar-expand-lg (display on large devices)
- navbar-expand-xl (displayed on extra large devices> 1200px)
For more detailed informations please visit the bootstrap4 documentation.
Choose from the following options:
- Dark = Use the standard "Dark" theme of Bootstrap 4
- Light = Use the standard "Light" theme of Bootstrap 4
- Use own color = own color configurations (some of them have to be configured manually via own CSS properties)
The first two options use the bootstrap4 color schemes.
Set one of the following options:
- not fixed
- position fixed (bootstrap 4 standard)
- Use the jquery sticky plugin.
In most cases we recommend using the Sticky Plugin.
Alignment of menu links
Select whether the menu items should be arranged on the left or right side.
Manual setting of distances of the navigation
Select the option of the Sitebar variant:
- Fold-out static
- Foldable firmly positioned with overlay
- Partially foldable
Offcanvas style: The following options are selectable
- Dark = Bootstrap 4 Dark Layout
- Light = Bootstrap 4 Light Layout
- Own colors = Use own colors
The first two options are based on the bootstrap4 color schemes.
Off-Canvas default value: If "Partially Collapsible" has been selected as the sidebar version, you can select the appropriate options here: