Desktop
Usage
Open Appearance → Customize → Header & Menus → Desktop to shape how the masthead looks on laptop and desktop widths. Pick a Layout, set bar height and link spacing, then choose whether the header stays on screen while scrolling.
For hero-first pages, enable Transparent Masthead so the menu overlays photography instead of pushing content down. Pair it with Reverse Print link colors or a white reverse logo (under Logo) so links stay readable.
When to use it
- After assigning menus under Appearance → Menus, when you need the bar to match your brand layout.
- Homepages and landing pages that start with a Hero or full-width image block.
- Sites that want a pill-shaped Floating Masthead with blur instead of a full-width sticky bar.
Tips
- Floating Masthead hides Sticky Menu and transparent-hero controls — configure the pill opacity, blur, and corner radius instead.
- Show Cart, Show Login, and Show Search add icons to the masthead; social icons need profiles under Settings → Social Media.
- Link Color Opacity sliders are useful on photography — soften default links without changing the underlying palette color.
- Dropdown width and Submenu Style matter when menus have long labels or deep trees.
Settings
Desktop
How the logo and main menu share the masthead bar on desktop.
- Default defaultLogo left, menu links on the right.
- SpreadLogo left with menu links spread across the remaining width.
- StackedLogo centered above the menu row.
- ReversedMenu links on the left, logo on the right.
- CenteredLogo centered with menu links split on both sides.
- MiddleLogo and menu grouped in the center of the bar.
Horizontal gap between top-level menu items.
Minimum width of flyout submenus. Widen if dropdown labels wrap awkwardly.
Typography preset for dropdown links. Nav matches main menu styling; Paragraph uses body text styling.
- <nav>Dropdown links use your Navigation style settings.
- <p> defaultDropdown links use paragraph body styling.
When Transparent Masthead is enabled, the header overlays hero-style first sections instead of showing a solid background bar.
- EnabledHeader overlays hero-style first sections.
- Disabled defaultHeader keeps its normal solid background.
Background for dropdown menus while the masthead is transparent over a hero.
- Transparent defaultDropdowns stay transparent over the hero image.
- ColorDropdowns use a solid background color for readability.
Keeps the masthead fixed at the top while visitors scroll. Hidden when Floating Masthead is on.
Replaces the full-width sticky bar with a rounded pill masthead that floats over the page with blur and opacity.
How solid the floating masthead background looks. Lower values feel more glass-like.
Backdrop blur behind the floating masthead. Only visible when opacity leaves room to see through it.
Corner roundness of the floating pill. High values make a capsule shape.
Inner space on the left inside the floating masthead, before the logo.
Inner space on the right inside the floating masthead, after the menu.
When on, social icons use each network's brand colors instead of your palette link colors.
Switches the masthead to reverse-print link and social colors on solid backgrounds. Hero overlays may use reverse colors automatically without this toggle.
Link color when Reverse Print is on or the masthead overlays a hero.
Opacity for reverse-print links. Lower values soften links on photography.
Hover color for reverse-print links.
Opacity for reverse-print link hover states.
Adds an underline accent on menu hover and for the current page.
Thickness of the nav underline accent.
Underline color when a visitor hovers a menu item.
Underline color for the menu item that matches the current page.