Navigation: Top-Navigation and Off-Canvas

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.

Navigation Configuration

You can now make the following configurations in the template under the Navigation tab:

Toogle button

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.

Header design

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.

Fixed header

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.

Paddings

Manual setting of distances of the navigation

Sidebar version

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:

Closed

Open