This article will show you the basic Joomla Menu configuration within JSN Template and its Sun Framework.

Set up menu with basic setting

Step 1: Access JSN template style setting

Step 2: On Layout tab, select the “Menu" element, often placed in Heading section.

Step 3: Configure a primary Joomla menu with the element set on the right side.

	1. Select the menu you want to assign to the “Menu" item
	2. Select the base item path for the “Menu” item
	3. Select the starting menu level
	4.Select the ending menu level
	5. Display menu icon (Explain more at below section)
	6. Display the description of the “Menu" item (Explain more at below section)
	7. Display sub-menu item
	8. Select the effect when sub-menu show
	9. Display your menu on mobile with a hamburger icon.
	10. Set classed for custom CSS styling

Add icon, link description, no-follow attribute, and page subheading to menu

This setup is connected to “5. Show icon” and “6. Show description" in the above setting list as follow:

Step 1: Find the Menu items you want to add icon

Step 2: Go to Sun Framework Options tab, you can configure the following setting:

The menu will display with icon and description as follows:

Note: Remember to enable the feature in JSN Template setting to make it work.

Style your menu with JSN Template

You can configure color, font and font size of your menu within the template set

Step 1: Access JSN template style setting

Step 2: On Styles tab, select the “Menu"

From this control panel screen, you can configure the style of 2 menus

• Parental menu
• Dropdown menu

Parental menu setting

To change a parental menu style, click on any parental menu item to open its settings and customize it.

Note: Sometimes, the background color of the menu follows the background color of Header section (Menu element often places in Header section).

You can go to Styles -> Section -> Header to change Header background.

Dropdown menu setting

To change a sub-menu item style, click on the submenu in the preview panel to open the settings.

Fix menu - Sticky header

To enable sticky menu, please enable sticky features for section to contain menu element (often as Header). Or you can follow this picture:

After configuration, you can customize sticky menu in Style/Menu setting for parental menu:

Off-canvas menu

A trending style of menu on website nowadays as it will save your website a lot of space, bringing the simplicity and elegance to your website.

To setup an off-canvas menu, you need to drag the menu element in either 4 positions of off-canvas.

You can also configure the off-canvas section within the right setting panel.

This example below will show you more detail.

Setup tree menu, side menu and div menu

Side menu A unique vertical menu with slide-out panels. This menu is extremely efficient when you have complex navigation with a lot of menu items.
Tree menu An accessible menu which shows sub-menu beside parental menu. Represents a hierarchical view of website structure.
Div menu A unique horizontal menu. This menu is extremely efficient when you have menus, not include sub-menu. Often place in Footer.

To set up whichever menu:

Step 1: Create a menu module

Step 2: Go to Advanced tab/ Menu Class Suffix parameter/ type a specific class for each menu as follows:

• For Tree Menu: “ menu-treemenu"
• For Side Menu: “ menu-sidemenu"
• For Div Menu: “ menu-divmenu"

Important note: you have to add a Space before any CSS class to make the suffix class work.

Align menu

If you want to align right for your menu, add this code to your custom.css file. You can find the file follow this guide.

nav.navbar.sunfw-menu-head ul.navbar-nav {

float: right;

}

If you want to align center, add this code to your custom.css file. You can find the file follow this guide.

@media (min-width: 768px) {

nav.navbar.sunfw-menu-head ul.navbar-nav {

float: none;

display: flex;

align-items: center;

flex-wrap: wrap;

justify-content: center;

}

}

Mobile menu

On the menu setting, if you enable Mobile target, you can modify

• The icon to come with the menu.
• The background behind the hamburger icon.

Tip for creating a menu

1. Keep the menu short. Limit the number of parental menu from 3 to 6. It will make your website look clean and bring better user experiences for visitors.
2. Use concise name for each menu item. You don’t have much space for long-text menu.