> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header

> Style the bar at the top of every page: its shape, your logo and name, the menu links, a button and the phone menu.

Set up your header once, and it appears across your whole site, in light and dark. The header is the bar at the top of every page, with your logo, your menu links and a button.

 **Who can do this:** Editors, Admins and Owners. Your logo and business name are set in Site settings, where only Admins and Owners can change them.

## Open the header settings

* In the toolbar (the bar across the top of your site once you're signed in; see [The toolbar](https://docs.fetchski-attract.com/guides/get-started/toolbar-and-command-palette.md#the-toolbar)), choose **Site design**, then one of the five **Header:** tabs.
* Or open the command palette (⌘K, or Ctrl+K on Windows), choose **Site design**, then a **Header:** tab.

The header has five tabs: **Header: Layout**, **Header: Brand**, **Header: Navigation**, **Header: Button** and **Header: Mobile**. In each one, settings are grouped in cards. Choose a card to open it.

![Site design open on Header: Navigation, with the five Header screens ringed in the side list and the Menu links card open: Header navigation (7 added, with an Edit Header navigation button) and the "More" dropdown label, above the closed Link text and Hover and current page cards.](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/header/guides-site-design-header-screen-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=230f21d57cea6e8593290165f706ba27)

The Header: Navigation tab, with Parker's menu links.

![Parker's header as visitors see it at the top of the home page: the logo and wordmark on the left, the menu links with a More menu, and the Book a visit button on the right.](https://mintcdn.com/fetchski-attract-api/-xGXn_krfc_rfFbR/images/cms/guides/site-design/header/guides-site-design-header-overview-light.png?fit=max\&auto=format\&n=-xGXn_krfc_rfFbR\&q=85\&s=7fbcf4f99567b9ce84239aae3b127380)

Parker's header: logo, menu links and a button.

## Header: Layout

**Bar**

* **Bar style**: how the bar looks.
  * **Floating (transparent → glass on scroll)** sits see-through over the top of the page, then turns to frosted glass as visitors scroll.
  * **Glass (always frosted)** is frosted from the start.
  * **Solid** is a plain, filled bar.
* **Bar width**: **Island (floating, contained)** is a rounded bar that floats inside the page width. **Full width (edge-to-edge)** runs from one side of the screen to the other, with square corners.
* **Bar corner radius**: how round an Island bar is: **Pill**, **Rounded**, **Slight** or **Square**.
* **Background**: the bar's color, for **Glass** and **Solid** bars. Leave it empty to use your card color.
* **Show bar border** and **Show bar shadow**: a thin outline and a soft shadow around the bar.

**When the page scrolls**

* **Hide on scroll down**: the bar slides away as visitors scroll down, and comes back when they scroll up.
* **Morph to glass on scroll**: for a **Floating** bar. Turn it off to keep the bar see-through all the time.

**Themes and small screens**

* **Use the dark-theme header in both themes**: keeps the header dark even when visitors switch your site to light. Use it when your header always sits on a dark photo. While it's on, the light-theme header colors and your light-theme logo aren't used.
* **Collapse nav to menu at**: below this screen width, the menu links fold into a menu button. Choose **Medium (768px)**, **Large (1024px)** or **Extra large (1280px)**. Pick a larger width if you have many links or long ones.

![Parker's header 3 times, stacked: Floating at the top of the page (see-through over the Hero), Glass, and Solid; then one more row showing Full width instead of Island.](https://mintcdn.com/fetchski-attract-api/-xGXn_krfc_rfFbR/images/cms/guides/site-design/header/guides-site-design-header-styles-light.png?fit=max\&auto=format\&n=-xGXn_krfc_rfFbR\&q=85\&s=51be2efa6aa69e6f3bf465da24df769d)

Floating, Glass and Solid bars, and a full-width bar.

## Header: Brand

Your logo images and business name come from Site settings → **Brand**. These settings choose how they look in the header. See [Brand](https://docs.fetchski-attract.com/guides/site-settings/brand.md).

**Logo**

* **Logo height**: **Small**, **Medium** or **Large**.
* **Animate logo on hover**: the logo tilts and grows a little when the pointer is on it.

**Wordmark**

The wordmark is your business name, written beside the logo.

* **Show text wordmark**: turn it off when your logo already includes your name.
* **Wordmark text**: different words for the wordmark. Leave it empty to use your business name.
* **Split wordmark into name + caption**: shows the first word large and the rest small underneath. "Parker's Puppy Playland" becomes a big "Parker's" over a small "Puppy Playland".

**Wordmark style** and **Caption style**

The color, **Weight** and **Size** of the name, and the color and **Weight** of the small second line. **Weight** is how light or bold the text looks, from thin to heavy. Each color can be set separately for light and dark. Leave a color empty to use your site's colors.

## Header: Navigation

**Menu links**

**Header navigation** is the list of links in your header, in order. To change it:

1. Open the **Menu links** card and choose **Edit Header navigation**. The list opens in its own window.
2. To add a link, choose **Add Item**, then fill in its settings (below).
3. To change a link, choose it in the list. To reorder links, drag them up or down. To remove one, use the remove button beside it.
4. Choose **Save** in the list window to keep the list, then choose **Update** to save everything.

For each link, fill in:

* **Label**: the words visitors see, such as "Daycare".
* **URL**: where it goes. For a page on your site, type its address without the domain, starting with /, such as /daycare. To find it, open the page on your site and copy the part of the address after your domain. For another website, paste its full web address, starting with https\://.
* **Placement**: **Visible in the nav bar**, or **In the “More” dropdown** to tuck it into a menu at the end of the bar.

The header shows the links in the order of this list. Where each link goes depends on whether you've placed any link in "More" yourself:

* **No link placed in "More"**: the bar shows your first 4 links and puts the rest in "More" for you. With 5 links, the 5th goes in "More".
* **At least one link placed in "More"**: the 4-link limit no longer applies. Every link set to **Visible in the nav bar** shows on the bar, and only the links you placed in "More" go there. With 5 links and 1 placed in "More", the bar shows 4 and "More" holds 1.

**“More” dropdown label** is the name of that menu. It says "More" until you change it.

> [!WARNING]
>
> A new page isn't added to the header on its own, and removing a page doesn't remove its link. Add, change or remove its link here.

**Link text**

The color, **Weight** and **Size** of the menu links. Each color can be set separately for light and dark.

**Hover and current page**

* **Marker**: how a link is marked under the pointer and on the current page. Choose **Underline sweep**, **Underline grow (from center)**, **Pill background** or **None (color only)**.
* **Hover color**: the link's color under the pointer. It uses your primary color until you set it.
* **Current page color**: the color that marks the page visitors are on. It uses your secondary color until you set it.

![Parker's header with the More menu open, listing Blog and Contact; the Gallery link marked as the current page with the underline marker.](https://mintcdn.com/fetchski-attract-api/-xGXn_krfc_rfFbR/images/cms/guides/site-design/header/guides-site-design-header-more-light.png?fit=max\&auto=format\&n=-xGXn_krfc_rfFbR\&q=85\&s=e282fc8731c7d05ade5e0708afb11452)

Links placed in More open from a menu at the end of the bar.

## Header: Button

The button at the end of the header, such as "Book a visit". It's your header's call to action (CTA): the one thing you most want visitors to do. A new site starts with a placeholder button: change its words and link, or clear **Button label** to hide it.

The tab opens with a **Live preview** of the button in your settings. Under it, **Reset Header CTA to:** (CTA is this call-to-action button) puts the button back to your site's **Primary Default** or **Secondary Default** look.

* **Button**: **Button label**, **Button link**, **Open in new tab**, **Button style**, **Button size** and **Corner radius**.
* **Colors**: **Button color**, **Label color** and **Hover color**, each for light and dark.
* **Hover effect**: what the button does under the pointer: **Hover surface**, **Offset / glow color** and **Hover motion**.
* **Icon**: an optional icon beside the label: **Icon name**, **Icon family**, **Icon position** and **Nudge icon on hover**. Find an icon at [fontawesome.com/icons](https://fontawesome.com/icons) and type its name without "fa-", such as calendar-check. Then pick its look in **Icon family**, such as **Classic Regular**.

These work like every other button on your site. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

## Header: Mobile

On phones and small screens, the menu links fold into a menu button. Tapping it opens a drawer that slides in from the side.

**Menu drawer**

* **Drawer side**: **Right** or **Left**.
* **Drawer width**: **Narrow**, **Normal** or **Wide**.
* **Background**: the drawer's color. Leave it empty to use your page background.

**What it shows**

* **Show logo in drawer**: your logo at the top of the drawer.
* **Show CTA button in drawer**: your header button (the call to action) at the bottom of the drawer.
* **Show scroll cue**: a small moving hint when there are more links than fit, so visitors know to scroll.

The drawer lists every menu link, including the ones in "More".

**Link text**

The color, **Weight** and **Size** of the drawer's links, and the **Hover and current page color**. Each color can be set separately for light and dark.

![Parker's site on a phone with the menu drawer open from the right: the logo at the top, every menu link, and the Book a visit button at the bottom.](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/header/guides-site-design-header-drawer-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=638dd3c1266a0a42b3ee097dc4bba1d1)

The menu drawer on a phone, with the logo and the header button.

## Put your header live

Choose **Update** to save your header and put it live on every page. To save it without putting it live yet, open the arrow next to **Update** (**More save options**) and choose **Save Draft**. Your changes wait there; open the window again and choose **Update** when you're ready to put them live.

Only the **Header: Button** tab has a preview. To see the other tabs' changes, you put them live: choose **Update**, then look at your site. Check it in both themes, and on a phone-sized screen.

## Good to know

* **Leave colors empty to stay on brand.** In the header's own settings, an empty color follows your site's palette, and a light-theme color left empty uses the dark-theme one. See [Colors](https://docs.fetchski-attract.com/guides/site-design/colors.md). The header button's colors follow the button rules instead; see [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).
* **The header uses your site fonts.** Change them in [Typography](https://docs.fetchski-attract.com/guides/site-design/typography.md). Pages and sections can't give the header a different font.
* **The header follows your site width.** See [Site width](https://docs.fetchski-attract.com/guides/site-design/site-width.md).
* **The light and dark switch is in the header.** Visitors use it to change your site's theme. On a phone, it's inside the menu drawer.

## Related

> [card] [Footer](https://docs.fetchski-attract.com/guides/site-design/footer.md)
>
> the bar at the bottom of every page.

> [card] [Brand](https://docs.fetchski-attract.com/guides/site-settings/brand.md)
>
> your logo and business name.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> every button setting, explained.

> [card] [Site design](https://docs.fetchski-attract.com/guides/site-design/index.md)
>
> every tab on this screen.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.