Header Styles & Options

Your header is the strip at the very top of every page: usually your logo, your navigation menu, and a call-to-action button. It's the first thing visitors see and the map they use to get around your site, so it's worth setting up well. StoutStack gives you three header styles and a deep set of options to fine-tune each one. Everything here lives on the Layout tab of Branding.

Find these settings in Site Settings → Branding → Layout → Header. Branding and Site Settings are available to Site Admins; Site Editors won't see them. The Layout tab includes a live preview with a Desktop / Mobile toggle. Use it to check how your header looks and behaves on both a computer and a phone before you save.

Choosing a header style

Start by picking one of three overall layouts:

Style	Layout	Best for
Classic Horizontal	Logo on the left, navigation inline across the middle, call-to-action button on the right	The safest, most familiar choice (works for almost any business)
Split Center	Navigation split into two groups around a centered logo	An elegant, editorial look that puts your brand front and center
Stacked Pro	A utility bar on top, then a row for your logo and tagline, then a dedicated navigation row below	The most feature-rich, conversion-focused option: great when you want to show contact info, ratings, and a strong call-to-action

If you're unsure, Classic Horizontal is the dependable default. Choose Stacked Pro when you want to surface the most information (phone number, hours, ratings, search).

Header options (available across styles)

Once you've picked a style, you can adjust these:

• Sticky: pins the header to the top of the screen so it stays visible as visitors scroll. When sticky is on, you can also enable a shrink-on-scroll height, which slims the header down slightly once someone starts scrolling, so it takes up less room while staying handy. (Shrink-on-scroll applies to the Classic Horizontal and Split Center styles; Stacked Pro keeps a fixed height.)
• Logo size: how large your logo appears in the header. (This is where you set the display size of the logo you uploaded on the Identity tab.)
• Header height: the overall height of the header bar, from compact to roomy. This applies to the Classic Horizontal and Split Center styles only; Stacked Pro uses a fixed height.
• Mobile menu style, how the navigation menu opens on phones, where links collapse behind a menu button:
  • Bottom Sheet: the menu slides up from the bottom of the screen (easy to reach with a thumb).
  • Top Drawer: the menu drops down from the top.
• Utility top bar: a thin strip above the main header for quick contact details. You can choose to show your phone number, hours, and social links here so they're always visible.
• Primary CTA button: your header's main call-to-action. Set its label (the text, like "Get a Quote" or "Book Now") and its link (where it goes, such as your contact page).
• Header width, how far the header stretches across the screen: Standard (aligns with your page content), Wide (roomier), or Full (edge to edge).
• Header background, the look of the header's background:
  • Solid: a solid color background (the dependable default).
  • Transparent over the hero: the header sits directly over your top banner image with no background, then fades to solid as visitors scroll. This looks best over a dark or image-based hero at the top of your page, where light-colored header text can sit cleanly on top.
  • Frosted glass: a soft, semi-transparent blurred background that lets a hint of the page show through.
• Button style / size / icon, fine-tune your header's call-to-action button beyond the site default: its style (solid, outline, or ghost), its size (small, medium, or large), and an optional icon (none, an arrow, a chevron, or any icon from the full icon library) to add a little visual cue.
• Nav text size / weight / letter case / spacing, control how your navigation links read: their size, weight (how bold), letter case (for example normal capitalization or all-caps), and spacing between links. Small touches here can make the nav feel more premium.

Extras for specific styles

Some options only appear when you've selected a particular header style:

Stacked Pro only

• Tagline: a short line of text next to or under your logo (for example, a quick descriptor of what you do).
• Show review rating: display your star rating in the header as social proof.
• Show Search link: add a link that lets visitors search your site.

Split Center only

• Small utility links on the right: a compact set of secondary links on the right-hand side, balancing the centered logo layout.

Setting up your header

1. Go to Site Settings → Branding → Layout → Header.
2. Pick a header style: Classic Horizontal, Split Center, or Stacked Pro.
3. Turn on Sticky if you want the header to follow visitors as they scroll (and add shrink-on-scroll if you like).
4. Set your logo size and header height.
5. Fill in your Primary CTA button label and link.
6. Choose your header width, background, and mobile menu style.
7. Optionally turn on the utility top bar and (for Stacked Pro) the tagline, review rating, and search link.
8. Use the Desktop / Mobile toggle in the live preview to check both views, then save.

Good to know

• The transparent header needs a dark or image hero. The "Transparent over the hero" background overlays your top banner and uses light text, so it shines over a dark or photo hero, but can be hard to read over a plain white top section. If your homepage starts with a light background, stick with Solid or Frosted glass.
• Your navigation links come from your menus. The header style controls the look; the actual links come from your Header - Primary menu in Site Menus. The Split Center style creates its two nav groups automatically by splitting that single Header - Primary menu in half, so you don't build a separate second menu. See Logo, Contact Details & Navigation Menus to set those up.
• Contact info shown in the utility bar. The phone number and social links come from your saved contact details and social profiles (set those once in Site Settings and the header uses them). The hours text is typed on the header's utility top bar itself. See the menus article above.
• Check mobile every time. Headers behave differently on phones (links collapse behind a menu button), so always flip the preview to Mobile before saving.
• Related reading: Footer Styles & Options.