How do I change the style of my navigation on Composer 2?

This article explains how to change the layout and styling of the site navigation on a Composer 2 website using the Header panel.

📍 Where to Find the Navigation Settings

1. Go to Panels.

2. Open the Header panel.

3. Once the Header panel has loaded, navigate to Default Content → Menu.

4. Select the menu you would like to display on the page.

5. Select Settings to begin editing the navigation style.

📐 Changing the Navigation Layout

Within the Settings section, you can adjust the overall structure and layout of the navigation.

Available Options

• Menu width

  • Standard

  • Full Width

• Header style

  • Default

  • Fixed (enables a sticky/fixed header)

• Background

  • Change the background colour or styling of the navigation

• Borders

  • Add or adjust borders around the navigation area

These settings control the overall appearance and behaviour of the site navigation.

🎨 Changing the Main Menu Text Style

To update the styling of the main navigation text:

1. Go to Content.

2. Select Menu.

You can then adjust the following options:

• Font family

• Font size

• Bold styling

• Uppercase text

• Text colour

• On hover colour

• On active colour

These settings control how menu items appear and respond when hovered over or selected.

📂 Changing Submenu Styles

Scroll further down within the Menu settings to edit submenu styling.

You can customise:

• Font family

• Font size

• Bold styling

• Uppercase text

• Text colour

• Background colour

• On hover colour

• On active colour

This allows submenu items to be styled independently from the main navigation.

📝 Notes

• 📌 Header panel controlled
  All navigation layout and styling changes in Composer 2 are managed within the Header panel.

• 📋 Menu-specific changes
  Changes apply only to the menu selected in Default Content → Menu.

• 💾 Remember to save
  Ensure you save your changes after updating any settings.