Adjust menu colors
Set the colors of the menu bar, submenus, tabs, product labels and the add-to-cart button.
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
-
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). -
Pick a color
Click the field next to a color (2). Pick a color, or type a hex code such as
#FFFFFF. -
Check the preview
Hover over items in the preview to check the hover colors.
-
Save and publish
Click Save, then Publish.
Color settings
Main menu
- 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.
Submenu
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?
Thanks for your feedback! Tell us what was missing
Report an issue