English Tiếng Việt
See demo Get started
Menu design

Custom CSS, reusable classes and fonts

This article is for you if you know a bit of CSS and want to change details that the Design tab doesn’t support yet. If you’re not comfortable with code, you can still change most colors, text sizes and layouts with the built-in settings.

When do you need to write CSS?

Use the in-app settings first. They already cover colors, text sizes, spacing and corner radius. Only write extra CSS when you need deeper changes, for example:

  • Change the text size or color for level 2 and level 3 menus.
  • Remove the grey background from the open menu item.
  • Turn a menu item into a rounded button.

The advantage is that CSS written in Navi+ stays with the menu, not with the theme. If you switch to another theme later, your menu’s styling stays the same.

Before you start

  • Open the menu you want to edit, go to the Configure step and scroll to the bottom of the page. You’ll see Reusable Classes (CSS), Custom CSS for this menu, Global CSS and two JavaScript sections.
  • Type the code straight into the box. You don’t need to wrap it in a style or script tag, because Navi+ adds that for you.

Each menu has its own code, such as #SF-12345678. When you write CSS, Navi+ adds this code to the start of every line, so the code only affects that menu and doesn’t disturb other parts of your store.

  1. In the Configure step, scroll down to Custom CSS for this menu.

  2. Type your CSS into the box. Use & to mean the menu you’re editing. For example, to change the text color of all menu items:

    & .name { color: #ffffff; }

  3. Click Save at the top, then open the store to see the result. The preview inside the app can look slightly different from your live store.

Navi+ replaces & with the menu’s code, like this:

You write Navi+ understands it as
& { background: red; } #SF-12345678 { background: red; }
& .name { color: #fff; } #SF-12345678 .name { color: #fff; }
ul.navigation { color: red; } #SF-12345678 ul.navigation { color: red; }
@media (max-width: 768px) { & { padding: 4px; } } Same idea, but only applies on narrow screens

You can look up the menu parts such as .name, .icon, .inner and more in Menu CSS class reference.

Note

The Global CSS box is right below. Code in this box is not wrapped with the menu's code, so its CSS applies to your whole store. Use it only when you want to affect things outside the menu.

Write CSS for a single menu item

Each menu item has its own CSS box. These styles stay with that item, even if you copy the item to another menu.

  1. In the Build Menu step, click the item name you want to change to open the Edit item panel.

  2. Click See more, choose Advanced, then find the CSS box.

  3. Type your CSS into the box. Here, & means the menu item you’re editing:

    & { background: #111; color: #fff; border-radius: 999px; padding: 6px 14px; }
.name { color: #fff; }

In this box, you can write in three ways:

  • Use & or &:hover to change the whole row of that item.
  • Use .name, .description, .icon i or .image img to change the parts inside the item.
  • Type a property such as color: red; without curly braces to apply it directly to the item. This older style still works, but you can’t use it together with @media.

If you also set a color, border or shadow in the item’s design settings, the two can override each other and your CSS won’t show. In that case, clear the value in the matching design setting, or add !important to the end of the CSS line.

The Attributes box next to it only adds HTML data-... attributes to the menu item. It doesn’t change the look.

Create a reusable class for several items

If you want 5 menu items to look exactly the same, don’t copy the same CSS 5 times. Create one shared class and add it to each item.

  1. In the Configure step, find Reusable Classes (CSS) and click Add new class.

  2. Type a name in the Class name box. Start with a letter and use only letters, numbers or underscores, such as pill_dark. You can add a note in the Description box, then type the code into the CSS Code box, for example background: #111; color: #fff;.

  3. Click Add.

  4. Go back to Edit item for each menu item, open Advanced, and choose the class name you just created in the Class names (reusable) box. Repeat for each item.

Later, when you want to change the style, edit this class in one place and every item updates with it. On the Starter plan, you can only view the existing classes, not create new ones.

Add JavaScript to the menu

Open only if you need to call your own function from the menu

The Internal Navi. Javascript Functions section lets you declare functions you want to call from somewhere else, for example when a shopper clicks a menu item. Every function you write here lives in the Navi object. For example, a function named yourFunc() is called with Navi.yourFunc().

Functions here don’t run automatically when the page loads. They only run when you call them. The Global Javascript section just below runs across the whole store with no wrapper, so use it carefully, the same as Global CSS.

Use a custom font

Navi+ includes many Google fonts. Choose one in the Design tab > Main menu > Font Family. The default is Roboto. The Sub menu tab also has its own Font Family box for submenus. If you leave it empty, submenus use the main menu’s font.

If you want a font that isn’t in the list, such as a font you bought and installed in your theme:

  1. Check the font name exactly as your theme declares it, for example Honey Salt.

  2. Go to the Configure step and paste this line into the Custom CSS for this menu box:

    & { font-family: "Honey Salt"; }

Your theme must already load this font file, because Navi+ only calls the font by name. It doesn’t upload the font file to your store.

Common CSS examples

Remove the grey background from the open item

By default, the menu item that matches the page the shopper is viewing has a light grey background from the navi-active class. To remove the grey only on the current menu, paste this into Custom CSS for this menu:

ul li.navi-active { background: initial; }

To remove it on all Navi+ menus in your store, paste this into Global CSS:

.naviItem ul li.navi-active { background: initial; }

Level 3 menu in the Desktop Mega Menu is cramped

Paste this into Custom CSS for this menu to pin the level 3 menu so it always starts right at the top edge:

ul.children[menulevel="2"] li.child.is-parent.menu-expand { position: initial; }
ul.children[menulevel="2"] li.child.is-parent.menu-expand ul.children[menulevel="3"] { top: 0px; }

Set a custom text size for each menu level

Paste this into Custom CSS for this menu and change the px values to suit you:

ul > li.item > .inner .name { font-size: 14px; }
ul.children[menulevel="2"] > li.child > .inner .name { font-size: 16px; }
ul.children[menulevel="3"] > li.child > .inner .name { font-size: 13px; }

When your CSS doesn’t work as expected

You wrote CSS but the menu doesn’t change

  • Check that each line starts with & or with a class name inside the menu. If you only write something short like .name { … }, the theme’s rules can easily override it.
  • Check whether the menu item already sets a color, border or shadow in its design settings. If it does, clear the setting or add !important to the CSS line.
  • Check your live store instead of only the preview in the app. If the live store still doesn’t update, read Changed the menu but the store hasn’t changed.

Your CSS also changes things outside the menu

You probably pasted the code into the Global CSS box. Move that code to Custom CSS for this menu and add & at the start of each line.

You wrote a JavaScript function but it doesn’t run

Functions written in Internal Navi. Javascript Functions don’t run when the page loads. Call them with Navi.functionName() where you want them to run.

Other platforms

The steps above are for Shopify — the default way.

Related articles

Did this page help?

Need a hand? Chat with us in the app or write to [email protected] — send your store URL and the menu name.