Header

The header is the main navigation element of your store. Scale Theme offers 5 different layouts, an advanced sticky system, a transparent mode for the homepage, and full control over element arrangement on desktop and mobile.

Header layouts

Scale Theme offers 5 layout variants, each with its own visual character:

Classic

The default layout. Logo on the left, menu in the center, icons on the right. Simple, effective, recognizable.

Centered

Two possible rows: one for the logo and one for the menu (or vice versa). Icons can be placed in multiple ways (inline, vertical, split).

Floating

The header is contained within a rounded floating frame above the content, with an elegant drop shadow.

Split

Header elements are separated into individual "islands," each with its own rounded background and shadow. A very distinctive look.

Minimal

A compact pill fixed at the top of the page. Contains only a hamburger button, an optional logo, and a few icons. Ideal for sites where content takes priority over navigation.

Glass effect (Frosted glass)

Available for the Floating, Split, and Minimal layouts, the glass effect adds transparency with a backdrop blur (backdrop-filter).

• Neutral: Uses the theme background color with transparency
• Ice: Cool blue tint (220, 235, 255) for a frosted glass effect

Sticky (Fixed header)

The header can remain visible at the top of the page while scrolling.

Always visible

The header stays permanently at the top of the screen, even when the user scrolls down.

Visible on scroll up

The header hides when the user scrolls down (to maximize content space) and reappears as soon as they scroll up (to facilitate navigation).

Header visible at the top, 2) Header hidden after scrolling down, 3) Header reappearing on scroll up)

Transparent header

The header can become transparent on the homepage, letting the hero image show through as the background.

The Invert colors option switches the text and icons to white to ensure readability on dark images.

Logo

Element arrangement

Desktop

The order of the 3 main elements (logo, menu, icons) is configurable:

Mobile

On mobile, 6 arrangements are available for the 3 elements (hamburger, logo, icons):

Hamburger menu (mobile)

The mobile menu opens in a drawer (side panel) when the user taps the hamburger icon.

Mobile navigation style

Drawer configuration

Hamburger button styles

4 visual styles for the hamburger icon:

Header icons

Per-icon configuration

Icon style

• None: Icons without background (minimalist)
• Subtle: Light gray background on hover
• Outline: Thin border around the icon
• Filled: Permanent colored background

CTA in the menu

A Call-to-Action button can be added directly in the navigation bar.

Color palette

The header inherits from the selected palette. This affects the header's background, text, icons, and accents.

Container and spacing

Container width

Spacing

Bottom border

Localization

Enables the language and/or country selector in the header, allowing international customers to choose their preference.

Desktop navigation

The desktop menu type defines how submenus are displayed:

The dropdown displays a simple dropdown menu. The mega menu displays a wide panel with columns, images, and products (see the Mega Menu documentation).

Settings summary