Adjust Menu Colors

Set the colors of the main menu, submenus, tabs, labels and buttons.

The Colors tab sets the colors of the whole menu: the menu bar, submenus, tabs, product labels and the add-to-cart button. Use it to match the menu to your brand. These colors apply to every item; to color one item differently, see the tip at the end of this page.

Open the Colors tab (1), then click a color field (2)

Change a Color

1

Open the Colors tab

In the menu editor, click the paint bucket icon (🎨) in the left sidebar (1). The Colors panel opens.

2

Click a color field

Click the field next to the color you want to change (2). Pick a color in the picker, or type a hex code such as #FFFFFF.

3

Check the preview

The preview updates right away. Hover over items in the preview to check hover colors.

4

Save and publish

Click Save, then Publish.

Colors can include transparency. An 8-digit hex code such as #383838A6 is the color #383838 with some transparency (the last two digits). #FFFFFF00 is fully transparent.

🎨 All Color Settings

Main menu — the top-level menu bar

Setting	What it colors
Background color	The background of the menu bar
Hover background color	The background of a top-level item when it's hovered or its submenu is open
Separator color	The divider lines between items (shown when Show divider on desktop / mobile is on in Menu Settings)
Text color	Top-level item text and icons
Hover text color	Top-level item text and icons on hover

Submenu — dropdowns, mega menus and their content

Setting	What it colors
Background color	The submenu background
Border color	The submenu border (shown when Show border is on in Menu Settings)
Heading color	Headings inside submenus, e.g. link list titles
Text color	Links and text inside submenus
Hover text color	Submenu links on hover
Description color	Description text under items
Hover description color	Description text on hover

Tab menu — tabbed submenus

Setting	What it colors
Heading color	Tab names
Active heading color	The name of the selected tab
Active background color	The background of the selected tab

Label — labels on products shown in the menu

Setting	What it colors
Sale text color / Sale background color	The sale label on discounted products
Sold out text color / Sold out background color	The sold-out label

Add to cart button — shown on products when Show add to cart button is on in Menu Settings > Advanced

Setting	What it colors
Text color / Hover text color	The button text, normal and on hover
Background color / Hover background color	The button background, normal and on hover

Text hard to read? Make sure Text color contrasts well with Background color, and Hover text color with Hover background color. A white hover text on a white hover background makes items disappear on hover.

To color a single item differently (for example a red "Sale" item), use the item's Color settings (Pro Navigation). See Edit Menu Item.

---

Related Articles

Adjust Menu FontMenu SettingsCustom CSS

---

💬 Need help?

Email us at 📧 [e-mail] - we’re happy to assist!