---
articleType: Tutorial
categories:
- Store Design
- Creator Dashboard
last_updated: '2026-05-15'
primaryTopic: header-customization
relatedModules:
- name: theme-editor-layout-checkout
  route: /admin/dashboard/store-design/layout/checkout
- name: theme-editor-layout-memberships-perks
  route: /admin/dashboard/store-design/layout/memberships_perks
- name: theme-settings-general
  route: /admin/dashboard/store-design/general/
- name: theme-editor-layout-home
  route: /admin/dashboard/store-design/layout/index
- name: theme-editor-layout-memberships-feed
  route: /admin/dashboard/store-design/layout/memberships_feed
shortDescription: 'The Header section of your site plays a key role in navigation
  and communication with your visitors. It allows you to:'
tags:
- multicurrency
- currency
- menu
- countdown
- shop now
- header
- announcements
- header-style
- sticky-header
title: Edit the header on your site
tasks:
- customize header layout
- add announcement bar
- set up countdown timer
- enable currency selector
- edit navigation menu
- enable a sticky header
- pick a floating header style
- apply a glass header effect
terms:
- header
- edit header
- navigation bar
- sticky header
- floating header
- glass header
- blur header background
- announcement bar
- countdown timer
- currency selector
- social icons
- header style
- header size
- search icon
- overlay header
labels:
- header
- site-design
- header-style
- scroll-behavior
- announcement-bar
- countdown-timer
contextString: Available on all Fourthwall plans. Accessed via the site designer in the creator dashboard.
breadcrumbPath: "Getting started > Design my storefront > How do I edit the header on my site?"
path: getting-started/design-my-storefront/edit-header
---

# Edit the header on your site

The header is the top bar of your Fourthwall site. It holds your navigation menu, logo, cart and account links, and optional elements like an announcement bar, countdown timer, currency selector, and social icons. Access all header settings from **Site Design** > **Layout** > [**Header**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/sections/header?redirect) in your dashboard.

[Image: Site header with logo, navigation menu, currency selector, and cart icon]

## Customizing the Header Layout

The header layout settings control how your logo, menu, and visible elements are positioned and displayed.

[Image: Header customization panel showing Layout, Header size, Header style options, and Visible elements settings with toggles for currency selector, social icons, and search icon.]

- **Edit menu.** Customize your site's navigation links. This controls both the header and footer menus. See [How to edit menu and create drop-down menus](/getting-started/design-my-storefront/edit-menus-and-dropdowns) for details.
- **Header layout.** Choose how your logo and menu are positioned (for example, Left Logo | Centered Menu).
- **Header size.** Select the height of your header bar.
- **Header style.** Pick between **Classic** (a full-width bar that spans the top of your site) and **Floating** (a detached bar with rounded corners and padding). See the Header style options section below for details.
- **Cart and account link style.** Select icons or text for these elements.
- **Show currency selector.** Let supporters switch between currencies you have enabled so they can see prices and check out in their preferred currency. See [Multi-Currency Settings](/manage-my-shop/shop-settings/multi-currency-settings) for setup instructions.
- **Show social icons.** Display social media icons in your header. Only the icons you have added under **Site Design** > **Style** > **Social Links** will appear. See [How do I add social links to my storefront?](/manage-my-shop/shop-settings/add-social-links).
- **Show search icon.** Display a search icon that opens an inline search bar for supporters. Shops with 20 or more offers have search enabled by default. You can turn this on or off at any time.
- **Make the section full width.** Expand the header across the full screen.
- **Add custom CSS code.** Modify header styles beyond the built-in options.
- **Customize section colors.** Adjust colors for better branding.

## Header style options

The **Header style** dropdown sets the overall shape of your header. Each style has its own controls.

[Image: Header settings panel with the "Header style" dropdown expanded, showing "Classic" and "Floating" options, alongside a preview of the site header.]

- **Classic.** A full-width bar that runs edge to edge along the top of your site. This is the default look for most shops.
- **Floating.** A detached bar that sits inside the page with padding around it and rounded corners. Use this for a modern, card-like header.

When you select **Floating**, two extra controls appear:

- **Floating header corner radius.** Set how rounded the header corners are. Drag the slider or enter a pixel value.
- **Padding.** Set how much space sits between the floating header and the edges of the page.

You can also layer visual effects on either style:

- **Add outline.** Draw a thin border around the header.
- **Add shadow.** Drop a soft shadow below the header to lift it off the page.

[Image: Header settings panel in the Layout editor displaying Menu, Layout, and Visible elements options, with dropdowns for header layout, size, and style, plus toggles for shadow and icons.]

[Image: Header layout settings panel showing options for menu editing, header layout (desktop), header size, header style set to Floating, with corner radius and padding sliders.]

## Scroll behavior

The **Scroll behavior** section controls how your header acts as supporters move down the page.

- **Sticky when scrolling.** Keep the header pinned to the top of the page as visitors scroll. This keeps your navigation, cart, and search within reach on every section of your site.
- **Blur header background.** Apply a frosted-glass effect to the header. Combined with a translucent background color, this creates a high-end glass look as content scrolls behind it.
- **Overlay header on homepage.** Let your homepage hero content show through the header so the bar blends into the background image or video at the top of the page.

[Image: Header layout settings panel showing options for header size, style, visible elements like currency selector and social icons, and scroll behavior toggles including "Sticky when scrolling".]

### How it looks on mobile

The glass and sticky settings carry through to mobile, so supporters see the same polished header on phones and tablets.

[Image: Header layout settings panel showing options for header size, style, visible elements, and scroll behavior with Sticky when scrolling and Blur header background enabled.]

## Adding an Announcement Bar

The Announcement Bar displays time-sensitive updates like sales, product drops, or free shipping offers at the top of your site.

To add an Announcement Bar:

1. Go to **Site Design** > **Layout** > [**Header**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/sections/header?redirect).
2. Click **Add Header Section**.
3. Select **Announcement Bar** and click **Add**.

[Image: Add header section dialog with Announcement bar option and Add button]

## Customizing the Announcement Bar

After adding the Announcement Bar, click it to open its settings and configure the following:

- **Announcement text.** Enter the message you want to display, such as "Free shipping for orders of $50 and more" or "New drop is live!" Keep it short and direct.
- **Enable Countdown (Optional).** Check the box next to **Enable countdown** to show a countdown timer next to your announcement text. Set an end date to create urgency. Use the format "January 1, 2022" or the countdown will not display correctly.
- **Add Links (Optional).** Link the Announcement Bar to a specific page such as Home, Shop, or a promo landing page. Select the destination under the **Links To** section.
- **Add Custom CSS Code.** Check this box to add custom CSS for additional styling and placement.
- **Manage sections.** Click the three-dot menu to **Hide**, **Rename**, or **Delete** the section.

[Image: Three-dot menu showing Hide section, Rename section, and Delete section options]