message-questionMenu structure and CSS

Short guide for styling the menu with Custom CSS for this menu, Reusable Classes (CSS), and the default HTML. The menu has three levels: main bar, submenu, nested submenu.

Note: This demo covers a Slide / Standard menu. Structure is the same for most menu types; TABBAR and Mega Menu may have minor differences β€” use DevTools on the live page to confirm.


Custom CSS β€” what to type

In Advanced β†’ Custom CSS for this menu, Navi+ adds a prefix (including #SF-… and menu scope). Write normal selectors only β€” do not type #SF-12345678 yourself.

.inner-level1 { padding: 12px 16px; }
ul.children[menulevel="2"] { border-radius: 8px; }

Use #SF-… manually only when you are not using this box (for example CSS in the theme file).

Global Stylesheet / CSS is a separate field: it applies to the whole site and is not scoped to one menu β€” use with care.

Reusable Classes (CSS): define .yourClass { … } in the Reusable table and assign the class to items β€” rules stay in the same internal CSS bundle; you do not need to add #SF-… in the box. The class appears on the li.

Do not wrap content in a <style> tag in the box β€” plain CSS only.


Detailed demo: one three-level branch (icon, image, name, description)

Example labels: Shop (level 1: icon + name + description) β†’ Clothing (level 2: image + name) β†’ T-Shirts (level 3: icon + name + description). This shows both media types and description.

The whole menu sits in one block:

<div id="SF-…" class="…">
  <ul class="navigation"> … </ul>
</div>

SF-… is the menu embed id β€” visible in the Navi+ dashboard (the blue badge next to the menu title) and in DevTools on the live page.

Order inside each div.inner (runtime)

  1. span.arrow β€” arrow (submenu / mobile, depends on menu type).

  2. (Optional) span.cart_count β€” only when the item uses cart badge with count.

  3. Media β€” one of:

    • Icon (Remix Icon / ri-…): span.icon β†’ i.ri-…

    • Image: div.image-border β†’ span.image-box β†’ span.image β†’ img &#xNAN;Note: if the item has an image, the app shows the image and does not render the icon for that row.

  4. div.info β†’ div.flexcol β†’ span.name (label) β†’ div.description (only if you fill description in the editor).

  5. (Optional / SEO) icon or image may be wrapped in a[href] β€” you may see <a>…</a> around span.icon or the image block in DevTools.

li classes explained

Class
Meaning

level-1 / level-2 / level-3

Depth of this item

is-parent-top

Level-1 item that has children

is-parent

Level-2+ item that has children

data-name="…"

Item label (attribute, useful for CSS [data-name] selectors)

Full HTML demo (illustrative classes / URLs)

Media snippets (for reference)

Icon only (no image):

Image only (image URL set on the item):

Selector examples for Custom CSS (in the Navi+ box β€” do not type #SF-…)

Remember: level 2 / 3 submenus sit inside the parent li, after the parent's div.inner β€” not as direct children of ul.navigation.

Same branch, text diagram:


Quick reference (suggested classes)

Level

Row (li)

Content wrapper

Next submenu

1

level-1

.inner-level1

ul.children[menulevel="2"]

2

level-2

.inner-level2

ul.children[menulevel="3"] if any

3

level-3

.inner-level3

β€”

menulevel="2" / "3" is the index of that submenu panel β€” not the same as level-1 on a top-level item.


Quick tips

  • Target one depth with .inner-level1, .inner-level2, .inner-level3 instead of only .inner.

  • Style a whole panel (background, radius): ul.children[menulevel="2"] or [menulevel="3"].

  • Text: .info β†’ .flexcol β†’ .name, .description.

  • Icon: .icon or .icon i β€” image: .image-border, .image img (see detailed demo above).

  • Arrow: .arrow (usually first inside .inner).

  • Target a specific item by name: [data-name="Home"] .name { … }.


Classes missing on the store?

Clear theme cache, republish the menu, or check the script version. Use DevTools to confirm class names on the live page.


Support documentation β€” Navi+

Last updated