This page is a reference for the code fields of a whole menu. They sit next to each other at the bottom of the Configure panel. If you want to read by situation (“how do I change the color of the whole menu?”), see CSS for the menu, reusable classes and fonts. Code for a single menu item is on Animation, class, CSS and attributes of one item.
This is advanced material. If you only want to change a color, text size or spacing, use the fields in the Design step first.
Where are the code fields?
- Open the menu and click the Configure step on the vertical step bar on the left. A Configure panel slides out from the right.
- Scroll to the bottom of the panel. The code blocks sit together in this order: Reusable Classes (CSS) → Custom CSS for this menu → Global CSS → JavaScript for this menu → Global Javascript → Google Icon Weight → Smart Optimization → Attributes → Environment Variables.
- Type code straight into the field. Don’t wrap it in a
styleorscripttag, because Navi+ adds them for you. When you’re done, click Save.
All six menu types have these fields, on every plan. Reusable Classes can be added from the Business plan up, and Preload Image has a plan note explained below.
Code only runs on the devices where the menu is turned on. A menu that is only set to **Show menu on mobile** applies its CSS, JavaScript and Attributes only when shoppers view it on a phone. A menu with both options on runs on both. A menu with both off runs nothing.
| Field | Affects | Default |
|---|---|---|
| Custom CSS for this menu | This menu only | Empty |
| Reusable Classes (CSS) | Items that use the class | No classes yet |
| Global CSS | The whole store | Empty |
| JavaScript for this menu | The menu’s own functions | Empty |
| Global Javascript | The whole store | Empty |
| Attributes | The menu frame | Empty |
| Environment Variables | The menu’s text size | Empty |
| Preload Image | Images in submenus | Shows the status only |
CSS
Custom CSS for this menu
The CSS field for this menu only. You see it in the Configure panel, in the Custom CSS for this menu block, next to the Navi+ CSS structure link for looking up the names of the menu’s parts.
- What to type: normal CSS. Empty by default.
- Navi+ limits it for you: each menu has its own code, such as
#SF-12345678. Navi+ adds this code (with the menu type name) to the start of each line, so the CSS only touches this one menu. Use&to target the menu itself, for example& .name { color: #fff; }. - Applies to: all six menu types, every level, every item type. No paid plan needed. It only runs on the devices where the menu is turned on (see the note above).
- What shoppers see when you change this field: the items that match your CSS lines change style straight away on the store. The rest of the page stays the same. Other menus on the same store are not affected either.
Look up part names such as .name, .icon, .inner… in the article Look up the menu's CSS class names. The preview frame in the app sometimes looks different from the real store, so check again with the Preview & Test step.
Reusable Classes (CSS)
Where you create named CSS classes, then attach them to each item through the Class names (reusable) field. This block sits right above Custom CSS for this menu and has a table of classes and an Add new button.
- Create a class: click Add new, enter a Class name (start with a letter, use only letters, numbers or underscores, no spaces), add a note in Description (optional, up to 100 characters), type the CSS Code, then click Add.
- Attach to an item: open Edit item for the item and choose the class in the Class names (reusable) field. See the article on item code.
- Plan: Starter can only view the list (it shows the label “Starter — view only”) and cannot add classes. From the Business plan up, you can add and edit freely.
- Applies to: all six menu types.
- What shoppers see when you change this field: every item that uses this class changes style at the same time. Edit the class once and the whole group changes. A class that isn’t attached to any item has no effect.
The code of the classes is saved together with Custom CSS for this menu, but it is hidden from that field automatically, so the two never get mixed up as you type.
Global CSS
CSS that applies to the whole store page, not only the menu. This block differs from Custom CSS for this menu because Navi+ does not add the menu code to the start of each line.
- What to type: normal CSS. Empty by default.
- Applies to: all six menu types, on every plan.
- What shoppers see when you change this field: if you write
body { background: red; }, the background of the whole store turns red. This is exactly why you need to be careful.
If you write CSS and parts outside the menu also change, the code is usually in Global CSS by mistake. Move it to Custom CSS for this menu and add & at the start of the line. Only use Global CSS when you want to reach the whole store, for example to adjust .naviItem ul li.navi-active for every Navi+ menu.
JavaScript
JavaScript for this menu
Where you declare the menu’s own functions. In the app, this block may be labeled Internal Navi. Javascript Functions.
- What to type: JavaScript functions, for example
function yourFunc() { console.log('Hello'); }. Empty by default. - Navi+ wraps the functions for you: every function declared as
function nameOfFunction(…) {…}orvar nameOfFunction = function(…) {…}is placed in theNaviobject. You call the function asNavi.nameOfFunction()from elsewhere, for example when a shopper clicks an item. - Applies to: all six menu types, on every plan. It only loads on the devices where the menu is turned on.
- What shoppers see when you change this field: declaring a function changes nothing until something calls
Navi.nameOfFunction(). A line of code placed outside a function runs as soon as the menu loads.
Global Javascript
JavaScript that runs across the whole store page, with no wrapper of its own.
- What to type: normal JavaScript, for example
console.log('Hello world');. Empty by default. - Applies to: all six menu types, on every plan. It only loads on the devices where the menu is turned on.
- What shoppers see when you change this field: the code runs across the whole store when the menu loads, so an error in this field can affect other parts of the page. As with Global CSS, use it carefully.
Attributes and variables
Attributes
Adds extra HTML attributes to the outer frame of the menu, so other tools (such as a guided tour) can recognize the menu. This block is collapsed by default and opens by itself when it has data.
- What to type: in the form
name=value. For several attributes, separate them with;or,, for exampleattr1=value1;attr2=value2. Empty by default. - Applies to: all six menu types, on every plan. It is only attached on the devices where the menu is turned on.
- What shoppers see when you change this field: nothing changes that you can see. The attributes only appear in the page code, and your value is wrapped in double quotes.
To add attributes to a single item, use the Attributes field in Edit item. See the article on item code.
Environment Variables
A field for declaring environment variables that control special behavior of Navi+. In the app, this block is labeled (Deprecated), which means development has stopped. Use it only if you need to keep an older menu working.
- What to type:
NAME=value, separated by;or,. Spaces in the name are changed to_, and quotes around the value are removed. Empty by default. - The only variable that still works:
ENV_FONT_SIZE. For example,ENV_FONT_SIZE=12px;sets the text size of the item names (.name) in this menu to 12px. Other names, includingENV_FONT_FAMILYshown in the field’s hint line, currently do nothing. - Applies to: all six menu types, on every plan.
- What shoppers see when you change this field: the item name text in the menu changes to the size you enter. To change the normal text size, use the field in the Design step instead of this one.
Speed optimization
Preload Image
Located in the Smart Optimization block. This is not a field you turn on or off: the switch is always dimmed and can’t be clicked. It only shows you the status.
- What it does: when the shopper’s browser is idle, Navi+ preloads the images in the submenus (levels 2, 3, 4). So when a shopper opens a submenu, the images show up right away instead of waiting to load.
- Plan: the app’s note says this is for the Elite plan (the switch is on by default on Elite; lower plans show “Upgrade →”).
- Applies to: all six menu types that have images in submenus.
- What shoppers see when you change this field: images in submenus open faster. The trade-off is that the page loads a little more data. Navi+ skips preloading when the shopper has data-saver mode on or a slow network (2G/3G), and loads one image at a time so it doesn’t compete with the main content of the page. Images of items hidden from that shopper are not loaded either.
Other platforms
The steps above are for Shopify — the default way.
The fields are exactly the same as on Shopify. For Global CSS and Global Javascript, “the whole store” means the whole Wix page where the menu is loaded.
The fields are exactly the same as on Shopify. For Global CSS and Global Javascript, “the whole store” means the whole website where you embed the menu.