Menu CSS class reference

This article helps you look up the CSS class names for each part of the menu so you can target them accurately. If you don’t yet know where to paste code or how to write CSS in the app, read Custom CSS, reusable classes and fonts first. When you write in the Custom CSS for this menu box, you don’t need to type the #SF-… code, because Navi+ adds it for you.

In the tables below, the stability column tells you:

• Stable: part of the basic menu frame. You can rely on it long term.
• Internal: Navi+ turns these on and off while the menu runs, or for a specific feature. These class names may change when Navi+ is updated. You can still use them, but check them again after app updates.

Menu structure by level

Menus are built from nested layers. Level 2 and level 3 submenus sit inside the row of their parent item, after that parent item’s content.

Look up classes by part

Menu frame and menu items

Icons and images

Classes added to individual items

Classes by menu type and position

Each menu type adds its own class to .naviItem. Use it when you want CSS that applies to one menu type only.

For example, to change the font size only in the Tab Bar:

.STICKY_TABBAR .name { font-size: 11px; }

Classes by display position

The position you choose in Menu position and margins, mainly used for Tab Bar, also adds a class to .naviItem. Other menu types sometimes carry some of these classes too, for their default position.

All of these position classes are in the internal group.

Classes when shoppers interact with the menu

Navi+ turns these classes on and off as shoppers use the menu on your store.

For example, to remove the grey background of the selected item:

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

How to check class names on your store

Class names can differ slightly between versions. To see the exact classes used on your store:

1. Open your live store, right-click the part of the menu you want to change and choose Inspect.
2. Look at the li and div tags around that part to see which class names they have.
3. If the class you expect doesn’t appear, clear your theme’s cache and publish the menu again.