Understanding Menu Styles on Classic Composer and Composer 2

This article explains the menu style options available in Classic Composer and Composer 2, including where to find the settings and what each option controls.

🧩 Classic Composer

Menus in Classic Composer are configured through the site’s Design and Appearance settings and offer a selection of predefined menu layouts and styling options.

📍 Where to Find Menu Settings (Classic Composer)

1. Go to Settings.

2. Select Design and Appearance.

3. Open Sections.

4. Scroll down to Menu.

📋 Menu Type Options (Classic Composer)

Classic Composer supports the following menu types:

• ⬇️ Drop-down menu
  Displays submenu items beneath the parent item when hovered over or clicked.

• 🗂️ Mega menu
  Displays a larger dropdown with multiple links and sections.

• 🖥️ Full screen menu
  Expands to cover the full screen when opened.

• 📑 Full screen accordion menu
  Uses an accordion-style layout for expanding and collapsing submenu items.

🎨 Menu Text & Styling Options (Classic Composer)

The following styling options are available:

• Font family (primary or secondary)

• Font size (small, normal, or large)

• Uppercase toggle

• Bold toggle

• Text colour

• Submenu background colour

• Main menu text colour

⭐ Active Menu Styling (Classic Composer)

Active menu styles control how the selected page appears in the navigation.

Available options include:

• Text colour

• Underline

• Border

• Background

An active colour can also be set for the selected menu item.

🧱 Composer 2

Menus in Composer 2 are managed through Panels, allowing for more granular and flexible control over layout and styling.

📍 Where to Find Menu Settings (Composer 2)

1. Go to Panels.

2. Open the Header panel.

3. Navigate to Default Content → Menu.

4. Select the menu you want to display.

5. Select Settings to edit styling.

📐 Header Menu Layout Settings (Composer 2)

Within Settings, you can:

• Set menu width (Standard or Full Width)

• Change the background

• Add borders

🎨 Menu Content Styling (Composer 2)

Navigate to Content → Menu to configure main menu styling:

• Font family

• Font size

• Bold

• Uppercase

• Text colour

• On hover colour

• On active colour

📂 Submenu Styling (Composer 2)

Submenu styling options are available at the bottom of the menu settings and include:

• Font family

• Font size

• Bold

• Uppercase

• Text colour

• Background colour

• On hover colour

• On active colour

These settings allow independent control of main navigation and submenus.