Home Header And Footer Header and navigation menu

Header and navigation menu

Last updated on Jun 24, 2026

Header and navigation menu

The header is the bar at the top of every page: your logo, the main navigation menu, and the search, account, and cart actions. In the theme editor it lives in the Header group, not on an individual page, so any change you make applies across the whole store.

Open the header settings

  1. In the Shopify admin, go to Online Store then Themes.
  2. On Reign, click Customize.
  3. In the top section group list (left side), open the Header group and click Header.
  4. The header settings open on the right.

The header cannot be added or removed like a page section. It is always present, and you can only have one. To control the message bar above it, edit the Top bar entry in the same Header group.

Color

  • Color scheme: picks which of your saved color schemes paints the header background, text, and buttons. Schemes are defined under Theme settings then Colors.

Logo

Your logo image, sizes, and inverted version are set under Theme settings, not here. A link in this group points you there. The two settings below apply only when no logo image is set, so the store name shows as text.

  • Store name: overrides the text shown in place of a logo. Leave it blank to use your shop name.
  • Uppercase: shows the text store name in all capitals.

Layout

  • Desktop menu: chooses how the navigation appears on desktop.
    • Full menu shows the menu items across the header.
    • Hamburger hides the items behind a menu icon, the same icon used on mobile.
  • Open menu on: chooses whether a dropdown opens when a shopper hovers over a parent item (Hover) or clicks it (Click). This appears only when Desktop menu is set to Full menu.
  • Sticky header: controls whether the header stays on screen as a shopper scrolls.
    • Always visible keeps it pinned to the top at all times.
    • Show on scroll up hides it while scrolling down and brings it back when the shopper scrolls up.
    • Never sticky lets it scroll away with the page.

Menu

  • Menu: selects which navigation menu fills the header. You build and reorder the actual links in the Shopify admin under Online Store then Navigation, not in the theme editor. Nested items in that menu become dropdowns in the header.

Actions

These control the icons and button on the right side of the header.

  • Show search: shows or hides the search icon.
  • Show account: shows or hides the account icon. It appears only when customer accounts are turned on for your store.
  • Account menu: selects the navigation menu shown to a signed-in customer. This appears only when Show account is on.
  • Cart icon: the cart link is always shown and has no toggle. A count badge appears on it once the cart holds items. Whether clicking it opens a slide-in drawer or the full cart page is set by Cart type in Cart settings.
  • Button label: text for an optional call to action button in the header, for example a promotion or a sale link. Leave it blank to hide the button.
  • Button link: the destination for that button.

The dark header over a section

The header reads as light by default. When a section underneath it has a dark background (a hero image, a dark color scheme), the default header can be hard to read. You fix that from the section, not from the header: open the top section and turn on Use dark header theme over this section. The header switches to its dark styling while it sits over that section. This control is documented in Common section settings, and it appears on full-width sections that can sit behind the header.

Dropdowns and mega-menus

A parent item with child items in your navigation menu produces a dropdown automatically. The header can also hold richer mega-menu panels as an advanced option. For most stores, building a well-structured menu in your store's navigation settings is all you need.

The Menu block

Reign ships a Menu block you add elsewhere, most often in the footer or a group. It renders one navigation menu as a list and is separate from the header. In Add block it appears under Links.

  • Menu: the navigation menu to display. Only top-level items render. Nested items are ignored.
  • Heading: an optional title above the list.
  • Heading style: Default for a normal heading, or Eyebrow for a small uppercase label.
  • Heading size: Small, Base, or Large. This appears only when Heading style is Default.
  • Gap: vertical spacing between links, in pixels.
  • Link emphasis: Normal, Muted, or Faded, to make the links quieter against the surrounding content.

The Menu block also uses the standard Color and Padding controls. See Common section settings.

The Logo block

A Logo block places your store logo anywhere on the page, most often in the footer. The logo image comes from Theme settings under Branding. In Add block it appears under Basic.

  • Use inverted logo: shows the inverted logo version where it reads better against a dark surface. This appears only when both a logo and an inverted logo are set in theme settings.
  • Link: where the logo links to. It defaults to the home page.
  • Alignment: Left, Center, or Right.
  • Desktop width and Mobile width: the logo width on each screen, in pixels.

The Logo block also uses the standard Margin control. See Common section settings.

Tips

  • The header's links come from the navigation menu you pick in Menu, not from blocks. To change what appears in the bar, edit that menu under Online Store then Navigation.
  • If the account icon is missing even with Show account on, confirm customer accounts are enabled in your Shopify settings.
  • If you choose Show on scroll up or Never sticky, test a long page on a phone so the header behaves the way you expect while scrolling.