Navbar (Top Menu) and Mobile Menu Design

Where to find it: Theme Editor → page menu → Structure → Header Structure → click the Navbar component on the canvas → Properties in the right panel Who it's for: Anyone who wants to build the store's top bar (logo, menu, search, cart) their own way and customize the menu that opens on phones In short: The Navbar is the bar at the top of every page of your store. This article explains how to arrange its blocks, how to manage menu items, and how to design the mobile menu that opens on phones.

---

What is it for?

The first thing a visitor sees when they open your store is the bar at the top: logo on the left, categories in the middle, search and cart on the right. We call this bar the Navbar. It stays in place whether the visitor moves to a product page or into the cart, which is why you edit it once inside the Header Structure rather than page by page.

On phones there is no room for the menu items, so they are hidden and a small menu button (three lines) takes their place. Tapping it slides a panel in from the side. That panel is the mobile menu, and you can now design it too.

---

Where do I edit the Navbar?

The Navbar component lives inside the Header Structure. To get there:

1. In the top toolbar, click the page name next to your store name.
2. In the list that opens, pick Header Structure under the Structure heading.
3. Click the top bar on the canvas. The right panel switches to Properties and shows the Navbar settings.

What happens on other pages? On the Home Page or a custom page the top bar is still drawn on the canvas, but it cannot be edited there; it is only a preview. Hover over it for a moment or click it and a small card appears: "This area is edited in the Header Structure." The Edit Header Structure button on the card takes you straight there. The same card appears for the footer at the bottom of the page, labelled Footer Structure. To dismiss the card, click the **** in its corner or anywhere else on the page.

---

Setting groups

When the Navbar is selected, the right panel shows these tabs:

---

Composition: the skeleton of the bar

Start from a preset

Pick a starting template from the Preset list. The template places the blocks for you; you can move any of them afterwards.

Rows makes the bar One Row or Two Rows. With two rows the bottom row is usually reserved for the menu.

General settings

Blocks

The bar is made of blocks. Add the ones you want from the buttons under Blocks; a new block lands in Row 1 → Right first, then you move it.

Single-instance blocks (Logo, Menu, Search, Cart, Profile) appear greyed out once they are already on the bar.

Placing blocks

Each row has three boxes: Left / Center / Right. Grab a block by its name and drag it into another box. When you are over a box its border turns dashed; drop it there.

Every block row has two small icons:

• Gear () — opens the block's own settings (see below).
• Trash — removes the block from the bar. For Custom Button and Social Icons blocks the settings are deleted too; you have to add the block again to get them back.

Row Settings, to the right of the row title, lets you change that row's Height, Block Gap, Vertical Align, Columns (three columns or a single wide one), Horizontal Align and Width.

The Mobile row

At the bottom of the block list there is a separate row titled Mobile. It decides how the bar looks on phones: because space is tight, the desktop arrangement is not reused; this one is. Default: Menu button on the left, Logo in the center, Cart on the right. Drag a block here as well to choose where it appears on phones. The same block can sit in a desktop row and in the Mobile row at the same time.

A block's settings

Click the gear on a block row; its settings open right underneath. Each block also has Mobile / Tablet / Desktop switches; turning one on hides the block on that device.

---

Menu items

Click the gear on the Menu block to open the list of menu items. Drag items to reorder them, use the trash icon to delete them.

Adding items

There are three ways:

An item's settings

Click an item row to expand it:

• Link — where the item goes. Picking a link also renames the item to the link's name.
• Dropdown Menu Style — if the item has subcategories, how they open on hover:

• Featured Image / Title / Link — only visible for Mega Featured and Mega Divider; they fill the promo area on the right.
• Sub Items — the categories under the item. You can Add Sub Item by hand, reorder by dragging and give each one its own link.

Showing a menu item as a button

To make an item stand out (say, "Sale") turn on Show as Button. In the area that opens:

Bulk actions

Under the list, Bulk Actions offers AI Suggest Icons for All, which proposes an icon for every item, and Bulk Button Style, which lets you Apply to All a single style.

---

Colors and appearance

Background tab:

Appearance tab:

The Layout tab holds Padding, Margin, Slot Gap (space between the blocks inside one area) and Max Width (how many pixels the bar's content may spread across).

---

Mobile menu design

The panel that opens from the menu button on phones used to have a fixed look. Now the Menu Design button at the top right of the Mobile row in the Composition tab lets you set it up your way. The button opens a settings area titled Mobile Menu Design below the panel.

The settings are grouped into five small boxes:

Layout

Content

Menu Items

Colors

There are three colors: Background, Text Color and Accent Color (used on tap and hover). Each comes with a Theme color switch that is on by default; in that state your store's general theme colors are used, and when the theme changes the mobile menu follows. For a different color, turn the switch off and pick from the color picker that appears.

Menu Button

The three-line button in the bar itself:

The Reset to Default button at the bottom returns every mobile menu setting to its starting value.

Step by step: a dark mobile menu that opens from the right

1. Go to the Header Structure, click the Navbar, and in the Composition tab press Menu Design on the Mobile row.
2. Opens From: Right. In the Mobile row drag the Menu block into Right and the Cart into Left.
3. Turn on Search Box and Account Link.
4. Under Colors, switch off Theme color for Background and pick a dark color; pick white for Text Color.
5. Item Style: Divided, Item Size: Large.
6. Switch the top toolbar to the Mobile view and click the menu button on the canvas; the panel opens and you see the result.
7. Happy with it? Save and Publish.

---

Frequently asked

Q: I set a hover color on a menu item but nothing changes. A: There are two separate settings. Ordinary items use Appearance → Menu Hover Color. Items with Show as Button turned on use the button's own Hover Background and Hover Text Color; the general setting does not affect them.

Q: The menu items don't show on my phone. A: That is expected. On phones the items are not in the bar; they are listed in the panel that opens from the menu button. If the menu button itself is missing, make sure the Menu block is in the Mobile row.

Q: My Custom Buttons don't appear in the mobile menu. A: Check that Menu Design → Content → Custom Buttons is on and that the bar has at least one Custom Button block. The panel takes its buttons from the Custom Button blocks on the bar; you don't add them separately.

Q: I want the social icons in the mobile menu too. A: Turn on Menu Design → Content → Social Icons. The icons and links come from the Social Icons block on the bar.

Q: The logo looks too big on phones. A: The Logo block's Logo Width / Height are shared between desktop and phone; Composition settings are not split per device. Pick a height that works on both (32–40 pixels is enough for most stores), or remove the logo from the Mobile row and move it into the panel heading with Show Logo in the mobile menu.

Q: I made a change but it doesn't show on the site. A: The Header Structure has to be published like any page. Press Publish in the top bar. Without publishing it is only visible in the editor.

Q: I want a different menu on just one page. A: The Navbar is shared by every page. For a different bar on a single page you can turn off Show Header Structure in that page's edit window and add a separate Navbar component inside the page; but do this only when you really need to, because you then have to keep two menus up to date.