Seventh > Header section

The Header section is the main site header. It can use a standard, transparent (floating), boxed, or translucent style, and includes a top row, main row (logo and navigation), and optional breadcrumbs.

What it does

This section displays:

A site header with configurable design and sticky behavior
An optional top row (menu, language/currency, social)
A main row with logo, navigation (classic menu, drawer, or both), and icons (search, account, cart)
Optional breadcrumb navigation below the header

Section settings explained

Text / background color

Sets header text and background colors.

Style

Standard — solid background, full width or fit.
Transparent (floating) — transparent over content; options to replace with standard on specific pages and to use an alternate text color.
Boxed — rounded container with optional opacity and blur.
Translucent — semi‑transparent with optional blur and “stall opacity” when sticky.

Show border bottom

Toggles a bottom border (hidden when style is Boxed).

Width

Full width or Fit; only applies when style is not Boxed.

Corner radius

Corner rounding for the header; shown when style is Boxed.

Background opacity

Opacity of the background; shown for Boxed or Translucent.

Make header fully opaque when sticky

When Translucent and sticky, use full opacity when scrolled (shown when opacity < 100% and sticky is on).

Blur background

Applies blur to the background (Boxed or Translucent); most visible when opacity is reduced.

Add a subtle shadow

Adds a light shadow to the header.

Transparent header (when style = Transparent)

Replace with standard header on specific pages

Checkboxes: regular pages, collections, product pages, article pages.
Specific page handles — comma‑separated list of handles to replace transparent with standard there.

Tip: Use this to display a standard header in pages where you don't have a hero section with media backgrounds as the first one in your page.

Alternate color scheme

Enable alternate — use a different text color when transparent (e.g. for hero contrast).
Alternate text color — color for that scheme.
Restrict alternate to specific pages — limit alternate to homepage, regular pages, collections, products, articles, or a list of handles.

Tip: Use this when you have pages that have different backgrounds than your defaults, and you want to choose different colors for the header in these.

Functionality

Sticky header type

None — header scrolls away.
Always sticky — header stays fixed.
Sticky on scroll up — appears when scrolling up.

Header's main row

The main row block is the primary header strip: logo, navigation, and icons.

Menu style

Classic — inline menu on desktop.
Drawer — hamburger opens the navigation drawer on all screens.
Both — classic on larger screens, drawer on smaller; burger position is separate.

Note: When your "classic" menus are too large to fit the viewport, they will be replaced with the mobile navigation. This could happen especially in the Shopify Editor, since it gives you a smaller version of your store.

Logo position

Left or Center.

Menu alignment

Left, Center, or Right (when logo is left and menu style is Classic or Both).

Drawer menu position

Left or Right for the hamburger icon (when menu style is Drawer or Both).

Logo

Logo image, height (desktop), optional mobile logo and mobile height.
When transparent + alternate colors are enabled: optional alternate logo and alternate mobile logo.

Main menu level typography

Gives you size, weight and case options for the classic menu. Only for the top level, it doesn't affect submenus or megamenus.

Icons

Show/hide: Search, Account, Cart (with cart count background color), Currency selector, Language selector.

A note on currency & lanuage selectors

Currency & language are dependent on your Shopify's store settings. These are not controlled by the theme, but rather part of setting up your store in a specific way.

Setting up megamenus & menus

The main navigation is built with blocks inside the header's main row block.

A dropdown that opens on hover/click and shows a grid of content (menus, cards, products, etc.).

Menu title

Label shown in the main nav for this megamenu.

Layout

Desktop columns — 2–6 equal columns or asymmetric (e.g. 34/66, 50/25/25, 40/20/20/20).
Columns alignment — Top, center, bottom, or stretch.
Grid gap — Default, small, medium, large, or x-large.

Highlight menu

Background and text color for the megamenu link in the main bar.

Inner blocks

Menus
- Allows you to insert a regular menu list
- Only top level items appear, children are not shown
- You can write an optional heading for the menu
- You have typography control over both the heading and the menu links
Cards
- You can choose from a range of cards to insert in any place inside the megamenu.

Menu block

A regular menu that will display all of it's childrens in regular submenus.

Link block

A regular (custom) link, without any menus, submenus or other content.

Header's top row

The top row block is an optional strip above the main row, hidden on small screens.

Content

Menu — Link list for the top row. Submenus will not appear in this menu.
Show language select, Show currency select, Show social links.
Social icons are set up in your theme's settings.

Menu typography

Gives you typography control over all the links inside this block.
Text size, text weight, case & opacity

Breadcrumbs

The breadcrumbs block renders a trail below the header (e.g. Home › Collections › Collection › Product). Not shown on the homepage.

Typography

Gives you typography control over all the links inside this block.
Text size, text weight, case, opacity & custom color

Tips for success

Use one main row block; add megamenu and menu blocks inside it for structure.
For transparent headers, test contrast on all hero images.
Keep top row links and labels short so they fit on medium screens.

Transparent and alternate colors are intended for use over hero images or strong backgrounds; set text colors for contrast.

Troubleshooting

If the header doesn’t look transparent, check Style is “Transparent” and that “Replace with standard” isn’t enabled for the current page.
If breadcrumbs don’t show, confirm the block is present and you’re not on the homepage.
If megamenu content is cut off, adjust desktop columns or grid gap.