Menu Styles

The primary menu supports several built-in visual styles and behaviours through modifier classes on the .primary-menu element. The base markup stays the same; you swap style classes to change hover effects, spacing, and open behaviour.

Base Menu Markup

<nav class="primary-menu">
	<ul class="menu-container">
		<li class="menu-item current">
			<a class="menu-link" href="#"><div>Home</div></a>
		</li>
		<li class="menu-item">
			<a class="menu-link" href="#"><div>Features</div></a>
			<ul class="sub-menu-container">
				<li class="menu-item">
					<a class="menu-link" href="#"><div><i class="uil uil-images"></i>Dropdown 1</div></a>
				</li>
				<li class="menu-item">
					<a class="menu-link" href="#"><div><i class="bi-mouse"></i>Dropdown 2</div></a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

Style and Behaviour Classes

Class	Effect
`with-arrows`	Adds dropdown arrow indicators to items that have a sub-menu.
`style-2`	Alternate menu style.
`style-3`	Alternate menu style (often paired with `menu-spacing-margin`).
`style-4`	Alternate menu style.
`style-5`	Alternate menu style.
`style-6`	Alternate menu style.
`on-click`	Sub-menus open on click instead of hover.
`sub-title`	Enables a subtitle line under menu links.
`menu-spacing-margin`	Adds margin-based spacing between top-level items.

Current / Active Item

Mark the active page with the current class on the .menu-item:

<li class="menu-item current">
	<a class="menu-link" href="#"><div>Home</div></a>
</li>

Centered Menu

Since the container is a flex list, use Bootstrap flex utilities to align it:

<ul class="menu-container justify-content-center"> <!-- center menu -->

Arrows Style

<nav class="primary-menu with-arrows">
	<ul class="menu-container"> ... </ul>
</nav>

Numbered Style with Spacing

<nav class="primary-menu style-3 menu-spacing-margin">
	<ul class="menu-container"> ... </ul>
</nav>

Click to Open Sub-Menus

Useful for touch-friendly layouts:

<nav class="primary-menu on-click">
	<ul class="menu-container"> ... </ul>
</nav>

Notes and Tips

Every menu label is wrapped in a <div> inside the .menu-link. This wrapper is required for the hover animations to work; do not remove it.
Icons go inside that same <div>, before the text: <div><i class="bi-mouse"></i>Label</div>.
Menu styles are additive with layout utilities. For example primary-menu with-arrows me-lg-auto combines an arrow style with Bootstrap auto-margin positioning.
The .primary-menu element is a flex item in .header-row, so grid classes like col-lg-5 order-lg-1 let you position it precisely.

Settings

Setting	Description
`Default`	Default Menu Style which aligns to the right. Example: `[ch_pre]<nav class="primary-menu"> ... </nav>[/ch_pre]`
`.style-3`	Menu Items with Theme Scheme Background Colors. Example: `<nav class="primary-menu style-3"> ... </nav>`
`.style-4`	Menu Items with Theme Scheme Border Colors. Example: `<nav class="primary-menu style-4"> ... </nav>`
`.style-5`	Menu Items with Large Icons on top of the Menu Name. Example: `<nav class="primary-menu style-5"> ... </nav>`
`.style-6`	Menu Items with a top animating border on Mouse Hover. Example: `<nav class="primary-menu style-6"> ... </nav>`
`.sub-title`	Menu Items with Sub Titles. Ex. `<nav class="primary-menu sub-title"> ... </nav>` Menu aligns below the Logo Area & Menu Items have Sub Titles. Ex. `<header id="header" class="sticky-style-3"> ... <div id="header-wrap"> <nav class="primary-menu style-2 sub-title"> ... </nav> </header-wrap> </header>`
`.with-arrows`	Menu Items with Arrows indicating that there is a Dropdown Menu underneath. Example: `<nav class="primary-menu with-arrows"> ... </nav>`
`.on-click`	Open Menu Items on Click rather than on Hover. Example: `<nav class="primary-menu on-click"> ... </nav>`

Was this page helpful?