Top header: colors, alignment, pinning and section switches

This page is a reference for each general style option of the Top header block. How to add the Top header, logo, shop name, search box, social links, account and buttons is in the Top header block guide.

To open these fields: in the Build Menu step, click the Top header item in the menu tree to open the Edit item panel. The first section of the panel (no heading) contains the fields below. These fields are on both Mobile Menu and Desktop Mega Menu, on every plan, and they are the same on Shopify, Wix and other websites.

Colors, alignment and pinning

Palette

It sits on the Choose a palette button, at the top of the Edit item panel for Top header. Click it to change the whole block’s color set in one click.

• Basic group: choose Dark (dark background, white text) or Light (light background, black text).
• Your primary color group: enter your store’s main color, then choose Dark or Light built on that color.
• Default: follows the header template you chose when adding. If no color has been set, the block uses the Dark tone (background #111111, text #FFFFFF).
• This is only a shortcut for colors. After you click, you can still adjust Background and Text color. The app doesn’t remember which palette name you picked.
• On your store: the background and text of the Top header block change with the palette.

Alignment

A selector with Left · Center · Right, next to the Palette field.

• Default: follows the header template you chose (if not set, Left).
• Center: the logo moves above the shop name. Right: the logo sits to the right of the shop name and slogan. Left: the logo sits on the left.
• On your store: the logo, shop name and slogan shift in the direction you choose.

Keep visible while scrolling

A dropdown right under Palette. It decides whether the header block sticks to the top of the menu when the shopper scrolls the list.

Option	Result
No — scrolls away with the menu	The header scrolls away with the list
Yes — keep the whole header	The whole header block stays fixed at the top of the menu

• Default: follows the header template.
• The header is usually about 200–300 px tall. Pinned, it takes up a lot of room on small screens, so turn off the sections you don’t need or turn on Auto-hide while scrolling.
• To pin the menu footer or other items, see Columns, dividers and pinned items.

Auto-hide while scrolling

A checkbox right under the field above. It only shows when you choose Yes — keep the whole header.

• Default: follows the header template (usually off).
• On your store: when the shopper scrolls down, the pinned header slides out of view to save space. When they scroll back up, it appears again right away.

Background image

An image picker, under the auto-hide field. Upload an image from your computer, or choose one from your product images or the ready-made library.

• Default: depends on the template. Templates without an image leave it empty.
• The background image covers the whole header block, and the Background color (below) is laid over the image. The more transparent the color, the clearer the image. The more solid the color, the more it hides the image.
• The background image doesn’t depend on the Logo switch. If you turn off the Logo section, the background image still shows.

Background

A color box on the left, in the last row of the general style fields.

• Default: follows the header template. If empty, the color follows the palette: #111111 with the Dark tone, #F5F6F7 with the Light tone.
• On your store: the background color of the whole header block. If a background image is set, this color is the overlay on top of it.

Text color

A color box on the right, next to Background.

• Default: follows the header template. If empty, it follows the palette: #FFFFFF with Dark, #18181B with Light.
• On your store: changes the text color of the shop name, slogan, hot keywords, text in the search box and social icons.
• Choose a text color that contrasts with the background (and the background image, if any) so shoppers can read it clearly.

Turn sections on or off

Section switches (Logo / Content / Search box / Social links / Account / Buttons)

Each section below the general style fields has its own heading with a switch. When you add Top header from the template screen, the Show in header line also has six matching switches: Logo, Name & slogan, Search bar, Account, Buttons, Social.

Section	Switch	Default when added
Logo	Yes	On
Content (shop name, slogan)	Yes	On
Search box	Yes	On
Social links	Yes	On
Account	Yes	Off
Buttons	Yes	On

• On your store: a section that is off isn’t drawn. A section that is on but has no content (no logo chosen, no name entered, no icon or button added) also hides itself, so no empty box is left behind.
• The main search box always shows default placeholder text, so when the Search box section is on, it shows even if the shopper hasn’t typed anything.
• The background image and background color aren’t part of any section, so turning off a section doesn’t remove them.
• Details of each field inside a section are in the Top header block guide.

Summary of fields

Field in app	Value	Default
Choose a palette	Dark · Light · by primary color	Set by header template
Alignment	Left · Center · Right	Set by header template
Keep visible while scrolling	No · Yes (whole header)	Set by header template
Auto-hide while scrolling	on or off (only when pinned)	Set by header template
Background image	image	Set by header template
Background	color code	Set by header template
Text color	color code	Set by header template
Six section switches	on or off for each section	Account off, the rest on

Other platforms

Shopify Wix Other website

The steps above are for Shopify — the default way.