How to Change the Menu Style on Your Motif Website

This article will show you how to change the style of the menu on your Motif website.

Note: The Motif template is part of our Classic Composer product, so the settings described here apply to Classic Composer sites.

⚙️ Steps to Change the Menu Style

1. In the CMS, go to Settings > Design & Appearance.

2. Go to the Sections tab.

3. Open the Navigation accordion. Here you’ll see options to adjust the look and feel of your navigation:

   • Menu Style: Choose one of four options:

     • Dropdown – Preview

     • Mega Menu – Preview

     • Full Screen

     • Full Screen Accordion – Preview

   • Font Size: Select small, medium, or large.

   • Text Case: Choose whether menu text appears uppercase or not.

   • Font Weight: Choose whether text appears bold.

   • Text Colour: Use a hex code or the colour picker.

   • Sub-menu Background Colour: Pick a colour for your sub-menu items.

   • Sub-menu Text Colour: Choose a colour for your sub-menu options.

   • Active Style: This controls how the current menu item is highlighted (select one):

     • Text Colour

     • Underline

     • Border

     • Background

   • Active Colour: Pick the colour associated with your chosen active style.

✅ Optional: Adjust Sticky Header Menu

1. Go to Sections > Header.

2. Ensure the Sticky menu option is enabled.

3. Choose the background colour behind the menu items.

💾 Save Your Changes

Once all adjustments are made, scroll to the bottom of the page and click Save to apply your changes.