Skip to content
Install app
English

Adjust menu colors

Set the colors of the menu bar, submenus, tabs, product labels and the add-to-cart button.

How-to guide All plans 2 min read

Colors in the Colors tab apply to every item in the menu, so you can match it to your brand in one place.

Change a color

  1. Open the Colors tab

    In the menu editor, click the paint bucket icon in the left sidebar (1).

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

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

  3. Check the preview

    Hover over items in the preview to check the hover colors.

  4. Save and publish

    Click Save, then Publish.

Color settings

Background color
The menu bar background.
Hover background color
A top-level item’s background on hover or while its submenu is open.
Separator color
Divider lines between items, shown when Show divider on desktop or Show divider on 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.

Dropdowns, mega menus and their content.

Background color
The submenu background.
Border color
The submenu border, shown when Show border is on in Menu settings.
Heading color
Headings inside submenus, such as 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

Heading color
Tab names.
Active heading color
The selected tab’s name.
Active background color
The selected tab’s background.

Label

Labels on products shown in the menu.

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 when Show add to cart button is on in Menu settings > Advanced.

Text color · Hover text color
Button text, normally and on hover.
Background color · Hover background color
Button background, normally and on hover.

Troubleshooting

Items are hard to read or disappear on hover

Make sure Text color contrasts with Background color, and Hover text color with Hover background color. White hover text on a white hover background makes items vanish on hover.

I want one item in a different color

Use the item’s own Color settings (Pro Navigation plan), for example for a red “Sale” item. See Edit a menu item.

Was this helpful?

Report an issue