Match menu colors to your brand (Palette)

The Palette tab changes the background, text, icon, divider and label colors of the menu all at once, using your brand color or a ready-made color set. You don’t need to adjust each color one by one.

Before you change colors

• You’ve already created a menu in Navi+. If not, read Your first menu in 5 minutes.
• Have your store’s brand color code ready, for example #1F6FEB. If you don’t have a color code, you can still pick one of the ready-made color sets.
• Palette only changes colors. It doesn’t change text content, text size, spacing, or add or remove menu items.

Change colors with Palette

Go back to the old colors if you click by mistake

Each time you click a color card, a Palette applied message appears for a few seconds with two buttons:

• Undo: go back to the colors from just before your last click.
• Reset to original: return the menu to the colors it had when you first opened the Palette tab. Even if you’ve clicked dozens of color cards in a row, this button goes straight back to the original colors, not to the colors right before.

If the message has disappeared, scroll to the bottom of the Palette tab and click Reset to original to return to the original colors.

Combine Palette with editing individual colors

Palette doesn’t keep colors in a separate place. Each time you click a color card, the app fills in the color codes for dozens of color boxes in the Main menu and Sub menu tabs.

• After you choose a Palette, you can still go to those tabs and adjust individual colors. Colors you change yourself stay as they are until you click a different Palette card.
• It’s best to choose the Palette first and fine-tune individual colors afterward. If you do it the other way around, your next Palette click overwrites the colors you carefully adjusted.
• If a menu item has its own color set in its item settings, Palette also changes that item’s colors so it matches the new tone. Settings other than colors stay the same.

To adjust individual parts yourself, read Style the main menu (level 1) and Style submenus (levels 2 and 3).

Common questions about colors

I adjusted my colors by hand, then clicked a Palette card and lost them. What now?

Each time you click a Palette card, the app refills all the color boxes, overwriting the ones you adjusted. Click Undo on the message bar right away to get your old colors back. Next time, choose the Palette you like first, then adjust individual colors.

The ready-made color sets don’t match my store’s brand color

The built-in sets use fixed color tones. To match your store’s exact brand color, paste your brand color code into the Your primary color box at the top, then click Generate.

I chose the Neon or Glassmorphism set and now there’s strange code in Custom CSS. Why?

Glowing borders and frosted glass effects need extra style code, so the app automatically inserts a short snippet into the menu’s Custom CSS box, with a note line NAVI_PALETTE_EFFECT … do not edit manually. Leave this code as it is. When you switch to another color set, Navi+ updates or removes it automatically. To find the Custom CSS box, read Custom CSS, reusable classes and fonts.

I only clicked Palette, but the color of one menu item also changed. Why?

That’s correct. If a menu item has its own text, icon, background or divider color, Palette changes those colors to the new tone too, so the item doesn’t clash with the rest of the menu.

I clicked a color card but the preview didn’t change. Why?

The preview takes about a second to load the new colors after each click. If it still hasn’t changed after waiting, reload the browser page and try again.

Other platforms

Shopify Wix Other website

The steps above are for Shopify — the default way.