Header, navigation and mega menu

01 / Shopify menu

Create the hierarchy first

Build navigation in Shopify Content → Menus, then assign it in the Header section. Sartelle reads up to three levels and keeps the same departments available on desktop and mobile.

1. 01
   Create the top level

   Use departments such as Woman, Man, Kids, Designers, Living and Sale.

2. 02
   Add category groups

   Second-level links become mega-menu columns or mobile accordions.

3. 03
   Add destination links

   Third-level links remain accessible inside each category.

4. 04
   Assign the menu

   Select it in Header → Main menu and test every market language.

02 / Mega menu

Add editorial merchandising

Create a Mega menu block whose trigger exactly matches a top-level menu label. The block can add image, collection and featured-product cards without replacing the menu hierarchy.

Column behavior

Split long link groups into balanced columns and limit unusually long lists.

Feature cards

Use optional campaign imagery, a collection or selected products.

Glass treatment

Configure tint, opacity and blur independently from the header.

Menu height

Large menus receive a viewport limit and internal scrolling.

03 / Desktop

Choose the header composition

Desktop navigation can remain visible or become a burger drawer. With visible navigation, place the logo left or center, align the menu left or center and choose a single row or a separate menu row beneath the logo and service actions.

Single row

Logo, primary menu and service actions share one compact header.

Two rows

Logo and actions use the first row; navigation receives the full second row.

Row heights

Adjust primary and menu rows independently and optionally divide them.

Burger drawer

Choose icon or icon-and-text trigger, drawer side, width and Solid or Glass material.

04 / Mobile

Departments and drawer

Mobile navigation uses a department rail and expandable category groups. Only one category accordion stays open at a time to reduce visual noise.

• Use concise top-level labels.
• Keep the most important departments first.
• Choose solid or glass drawer presentation.
• Verify the drawer overlays the announcement bar and remains keyboard accessible.

05 / Header behavior

Static, sticky or hide on scroll

Choose whether the header remains static, stays fixed or hides during downward scrolling. Transparent and glass modes can overlay the first visual section; when a desktop menu opens, Sartelle switches the header to an opaque state for legibility.