When you go to the Publish step to choose where the menu goes, you’ll see a few extra options. These fields only appear when the menu sits inside the page, like Desktop Mega Menu and Icon Menu. If you build a Tab Bar, Floating Button or Mobile Menu, you won’t see them.
Choose the placement type and spot
The three fields below are in the Somewhere else card of the Publish window. The other two cards (Replace your main menu, Add below your header) set the spot automatically, so you don’t have to type anything. You only need these fields when you want to place the menu somewhere else on the page.
Select how to place the menu
This field is in the Somewhere else card (the small line Choose the menu spot and how to insert the menu), right above the CSS Selector field. It tells Navi+ where your menu goes relative to the element you specify: in place of it, after it, or before it.
- Options: three cards: Insert after (right after that element), Replace (takes the element’s place), Insert before (right before that element). Icon Menu has a fourth option, the Below another Icon Menu card. See Stack an Icon Menu below another Icon Menu.
- Default for new menus: Replace. On Shopify, the two cards Replace your main menu (Desktop Mega Menu only) and Add below your header also use this field behind the scenes: the first sets Replace, the second sets Insert after. So you usually don’t need to touch this field.
- Applies to: Desktop Mega Menu, Mobile Mega Menu and Icon Menu, for the whole menu (not per level or per item). No special plan needed. Available on Shopify, Wix and other websites.
- What shoppers see when you change it: with Replace, the Navi+ menu takes the exact place of the target element, and the theme’s original menu is hidden. With Insert after or Insert before, the target element stays visible, and the Navi+ menu sits right after or right before it.
This is Shopify’s standard method - safe and removable anytime.
The Auto text color field of Desktop Mega Menu only appears when you choose Replace. See Auto text color.
CSS Selector
The text box sits right below the three placement types. Type the address (CSS selector) of the element on your store page here, like #element-id or .class-name. Navi+ uses this element as the anchor to replace, insert after or insert before.
- Default for new menus: empty. The field shows the faded hint
#id_of_element, .class_name (separate with , or ;). - Below the field: the link see the theme catalog (a list of selectors pre-measured for 331 Shopify themes), the line Several match? Only the first is used., and the button Pick it in Live mode.
- Show on one device only: add
(M)at the end of the selector to show it only on phones, or(D)to show it only on computers. Add nothing and it shows on both. For example#my-header(M). For the suggested cards, the app adds(D)automatically for Desktop Mega Menu and(M)for Mobile Mega Menu. - Several selectors (separate them with a comma or semicolon): the app uses the first one.
- Applies to: Desktop Mega Menu, Mobile Mega Menu and Icon Menu. For Icon Menu, when you choose Below another Icon Menu, this field isn’t used. You pick an Icon Menu from a list instead.
- What shoppers see when you change it: changing the selector changes where the menu sits on the page. If the selector doesn’t match any element on the page, Navi+ can’t find a spot to place the menu. For how to get a selector without knowing code, see Navi+ Live: place the menu in the right spot.
Pick it in Live mode
This is a small button under the CSS Selector field, not an input box. Click it and Navi+ opens your store in a new tab with Navi+ Live, so you can pick the element with your mouse and don’t have to guess the selector.
- How to use it: on the store tab, hover over the element you want (use the arrow keys to select its parent or child element), click Copy or press Cmd/Ctrl + C, then go back to the Publish window and paste into the CSS Selector field. Navi+ doesn’t fill it in for you. You have to paste it.
- Applies to: every menu that has a CSS Selector field in the Somewhere else card.
- If the store has a password: enter the password in the other tab first, then click Reopen in the waiting box.
3 more options when placing the menu on the page
| Option | Used for | When it applies | Default |
|---|---|---|---|
| Auto text color | Desktop Mega Menu | Choose the Replace placement and the menu has a transparent background | On |
| Spacing and divider | Icon Menu | Choose the Below another Icon Menu card | Spacing 16, no divider |
| Keep the menu at the top | Menus placed with an app block on Shopify | Placed with Method 2 through the app block | Off |
Change the text color to match the header with Auto text color
Many themes make the header transparent so it sits over the banner image at the top of the page, with white menu text. When the shopper scrolls down, the header background turns white. If your menu text stays white, it blends into the background and can’t be read. When you turn on this field, the text on the Navi+ menu changes color at the same time as the theme’s own menu text.
This is Shopify’s standard method - safe and removable anytime.
- The on-screen name is Auto text color — follow your header, and it’s on by default. In the new Publish window, when this field is on, it’s tucked under the Advanced settings button. Click Advanced settings to open it.
- This field only appears when you choose the Replace placement, which swaps the Navi+ menu in for the theme’s original menu. If you choose Insert before or Insert after, the original menu stays visible alongside it. There’s no color to copy, so this field is hidden.
- This feature only works with a Desktop Mega Menu whose background is transparent. Turn on the transparent background with the Is Transparent field in the Design step, in the level 1 menu container section. If the menu container has its own background color, Navi+ keeps the text color you chose and doesn’t change it automatically.
- While it runs, Navi+ keeps the theme’s original menu hidden and keeps reading that menu’s text color, then applies it to the level 1 text on the Navi+ menu. The text changes smoothly with the theme, whether the shopper scrolls the page or hovers over the header.
Turn this field off if you want the menu text to stay one color no matter how the header changes.
Stack an Icon Menu below another Icon Menu
When you want an Icon Menu to sit right under an Icon Menu already on the page, without finding a CSS selector, choose the Below another Icon Menu card. The card shows the description Stack this menu right after an Icon Menu you already published — spacing and a divider line optional.
Inside the card you’ll find these fields:
| Field | What it does | Default |
|---|---|---|
| Icon Menu | Choose the Icon Menu that sits above. When you first open it, this field shows — Choose an Icon Menu —. If you don’t choose one, the menu you’re building won’t show on the store | Not chosen |
| Spacing (px) | The gap between the two menus | 16 |
| Add a line above this menu, separating it from the Icon Menu above | Turn on to draw a divider line between the two menus | Off |
When you turn on the divider, four more fields appear:
| Field | Options | Default |
|---|---|---|
| Type | Line style: Solid, Dashed, Dotted, Double | Solid |
| Color | Color of the line | #EEEEEE |
| Size (px) | Thickness of the line | 1 |
| Width | Choose Full to span the full width, or Inset to indent 16px on each side so the line lines up with the Icon Menu margins | Full |
Without a divider, the gap between the two menus is exactly the Spacing. With a divider, each side of the divider is one Spacing away, so the total gap doubles.
In the selection list, Icon Menus that already sit below this menu are grayed out with the text (already follows this menu). You can’t select them, which prevents two menus from chaining into a loop.
These fields only exist for Icon Menu, not Mega Menu. Details for each field:
Spacing (px)
The number field in the Below another Icon Menu card: the gap between this Icon Menu and the Icon Menu above it.
- Unit and default: px, default
16. If you leave it empty or enter an invalid number, Navi+ uses16. - Applies to: Icon Menu only, and only when the Below another Icon Menu card is selected. No special plan needed.
- What shoppers see when you change it: the space between the two Icon Menu rows gets bigger or smaller by exactly the number of px you enter. When there’s a divider, each side of the divider is one such gap away.
Divider between Icon Menus
The switch below the Spacing (px) field, labeled Add a line above this menu, separating it from the Icon Menu above in the app. Turn it on to draw a horizontal line between two Icon Menus.
- Default: off.
- Applies to: Icon Menu only, and only when the Below another Icon Menu card is selected.
- When on: the four fields Type, Color, Size (px) and Width appear just below, on one row.
- What shoppers see when you change it: a separate divider line sits between the two Icon Menus, not inside either menu’s box. When it’s off, only the gap set by Spacing remains.
Type
Four buttons to choose the line style of the divider between two Icon Menus. Each button shows a sample of its line.
- Options: Solid (continuous), Dashed (short dashes), Dotted (dots), Double (two lines). Default Solid.
- Only appears when: the Add a line above this menu… switch is on. Icon Menu only.
- What shoppers see when you change it: the divider changes to the matching line style. Any unknown value (not one of the four above) is treated as Solid.
Color
The color field of the divider between two Icon Menus. Click the field to open the color palette, or type a #RRGGBB code.
- Default:
#EEEEEE(light gray). - Only appears when: the Add a line above this menu… switch is on. Icon Menu only.
- What shoppers see when you change it: the divider changes to that color. The color code must start with
#and be a valid hex value, otherwise Navi+ falls back to#EEEEEE.
Size (px)
Number field: the thickness of the divider between two Icon Menus.
- Unit and default: px, default
1. A value less than 1, or an empty field, uses1. - Only appears when: the Add a line above this menu… switch is on. Icon Menu only.
- What shoppers see when you change it: the divider looks thicker or thinner.
Width
Two buttons to choose the length of the divider between two Icon Menus.
- Options: Full (spans the full width, default) and Inset (indented 16px on each side so it lines up with the Icon Menu margins).
- Only appears when: the Add a line above this menu… switch is on. Icon Menu only.
- What shoppers see when you change it: the divider runs edge to edge, or shortens and leaves a margin on both sides.
Keep the menu at the top when shoppers scroll
When you open the Method 2: Insert as an App block in your theme editor card, where the Menu ID code is, you’ll see the field Keep the menu at the top of the page when scrolling up. Turn it on to keep the menu pinned to the top edge of the screen as the shopper scrolls.
- The field is off by default.
- Applies to the menus of Desktop Mega Menu, Mobile Mega Menu and Icon Menu. No special plan needed.
- This option is only available on Shopify, because it uses Shopify’s app block feature.
- The field only works when you place the menu with the Menu in Section app block in the theme editor. If you placed the menu with Method 1, using a CSS selector spot, turning this field on does nothing.
- When the shopper scrolls past the menu’s original position and the menu starts pinning to the top of the page, Navi+ automatically adds a light shadow underneath, unless you’ve already turned on a shadow for the menu container.
This is Shopify’s standard method - safe and removable anytime.
SF-5087000775Then, paste it into the app block called “Menu in Section” in your theme editor.Other platforms
The steps above are for Shopify — the default way.
On Wix, the three placement types and the CSS Selector field work the same way as on Shopify. But Wix and other websites don’t have the two cards that set the spot automatically, so you choose the placement type yourself and type the selector (with (M) or (D) if needed). Wix has a fixed selector table right in the Publish window, so you can copy a single line. The Pick it in Live mode button is only on Shopify. On Wix and other websites, open Navi+ Live by adding #navidebug-on to the address. On Wix and other websites there are no app blocks, so there’s no Keep the menu at the top field. The Auto text color field works the same as on Shopify for Desktop Mega Menu with the Replace placement. The spacing and divider between two Icon Menus are also the same as on Shopify. On Wix only, when the second Icon Menu is set to absolute positioning, the spacing may not be exactly as designed.
On other websites, the menu is placed with a code snippet, so there’s no Keep the menu at the top field. The other two options work the same as on Shopify.
Quick reference for fields on screen
| Field in the app | Used for menu | Default | Notes when using |
|---|---|---|---|
| Auto text color — follow your header | Desktop Mega Menu | On | Only works with Replace and a transparent menu background |
| Icon Menu | Icon Menu | — Choose an Icon Menu — | You must choose one for the menu to show on the page |
| Spacing (px) | Icon Menu | 16 |
Only in the Below another Icon Menu card |
| Add a line above this menu… | Icon Menu | Off | Turning it on adds Type, Color, Size (px), Width |
| Type | Icon Menu | Solid | Choose Solid, Dashed, Dotted or Double |
| Color | Icon Menu | #EEEEEE |
Color code of the divider line |
| Size (px) | Icon Menu | 1 |
Thickness of the divider line in px |
| Width | Icon Menu | Full | Choose Full or Inset |
| Keep the menu at the top of the page when scrolling up | Menus placed with an app block | Off | Shopify only, works with Method 2 only |
| Select how to place the menu | Mega Menu, Icon Menu | Replace | Choose Insert after, Replace or Insert before |
| CSS Selector | Mega Menu, Icon Menu | Empty | Add (M) or (D) to show only on phones or computers |
| Pick it in Live mode | Every menu with a CSS Selector field | — | Pick the element on the store, copy it, then paste it back |