# Styling

In this section, we explore how to style your header to match your site’s design. Header styling options allow you to customize various aspects of the header, including colors, spacing, and alignment of header elements.

To customize the look and feel of header go to **Appearance -> Customize -> Header -> Style (tab)**

***

### Header Container

The first set of options pertains to the header container style. Here, you can customize the header’s background, border, padding, and bottom spacing.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FgrXtitrKyFttUHMOm5o2%2FHeader%20Style%20-%20Container.jpg?alt=media&#x26;token=97e1b099-7343-4a51-91f0-f15eb6a8d059" alt="" width="326"><figcaption><p>Header container style options</p></figcaption></figure>

**Background**\
Set the background color for the header container to define its overall appearance.

**Border**\
Customize the border around the header container, including its width, style, and color.

**Padding**\
Adjust the vertical padding inside the header container to control the space between the header’s edge and its content, affecting its internal layout.

**Margin Bottom**\
Modify the space below the header container to create distance between it and the content that follows, ensuring a clear separation on the page.

***

### Menu

The default style and spacing for root-level menu links.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FbjIlzaqRBesLUwfvWfXA%2FHeader%20-%20Standard%20-%20Style.jpg?alt=media&#x26;token=1b93c387-9e5d-4d86-b401-1b6b110f018a" alt="" width="323"><figcaption><p>Root level menu items style options</p></figcaption></figure>

**Links**\
The colors for the normal, hover, and active states of the menu items.

**Hamburger Menu**\
Colors for each state of the toggle, it will inherit colors from Links by default.

**Text**\
Any text that is not a link inside the menu will be colored with this option.

**Menu Item Spacing**\
The spacing between root-level menu items.

***

### Submenu

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FNFSd7Ow1cS0r6hWKKEk6%2FHeader%20-%20Standard%20-%20Submenu.jpg?alt=media&#x26;token=e02c402e-42be-4295-a3dd-4a8849760f85" alt="" width="325"><figcaption><p>Submenu style options</p></figcaption></figure>

**Links**\
The colors for the normal, hover, and active states of the menu items.

**Background**, **Border**, **Padding**, **Radius** and **Shadow**\
The style settings for the submenu container.

***

### Pill Navigation

Provides an alternative styling option for header elements like menu items, buttons, and icons (e.g., Cart & Search) to achieve a pill-like appearance.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FZPj7CmRimKQZPubhcG6S%2FHeader%20Style%20-%20Pills.jpg?alt=media&#x26;token=b9765176-5a72-4489-af3d-359f05c54956" alt="" width="326"><figcaption><p>Pill navigation style options</p></figcaption></figure>

**Pill Navigation**\
Enable this option to style root-level menu items as buttons.

**Background**\
Sets the background color for the pill-style elements.

**Color**\
Determines the text color for the pill-style elements in three states: ***normal***, ***hover***, and ***active***.

**Padding**\
Controls the space inside the pill-style elements, around the text.

**Border Radius**\
Defines the roundness of the corners for the pill-style elements.

***

### Fullscreen Menu

An overlay menu that covers the entire screen, providing a full-page navigation experience.

<div><figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FviWT3i7BZ2Y2z7waHrY0%2FHeader%20Style%20-%20Fullscreen.jpg?alt=media&#x26;token=77da7e89-1a52-4857-bfb1-c3ae8cd3c062" alt="" width="332"><figcaption><p>Fullscreen menu style options</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FkAwDKDrWORYimG2xR9uG%2FHeader%20Style%20-%20Fullscreen%20Background.jpg?alt=media&#x26;token=60109416-c835-4bc7-9476-7cb9ddd0b1fb" alt="" width="324"><figcaption><p>Fullscreen menu background style options</p></figcaption></figure></div>

**Custom Background**\
The background color and image options.

**Links**\
Colors for link states: **normal**, ***hover*** and ***active***.

**Text**\
The color set here will be applied to text elements within the fullscreen menu.

***

### Off-Canvas Side

The drawer like container with overlay.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FESUNRCusukcKD1Ege6T4%2FHeader%20Style%20-%20Off%20Canvas%20Side.jpg?alt=media&#x26;token=3a59cffe-3d68-4cbf-895a-d1cc1664aecd" alt="" width="323"><figcaption><p>Off-Canvas Side style options</p></figcaption></figure>

**Overlay**\
The background that covers the entire screen behind the menu.

**Background**\
The background color of the menu container / drawer.

**Links** \
The color settings for the menu links in their different states: ***normal***, ***hover***, and **active**.

**Text** \
The color settings for other text elements within the menu container.

**Pill Background** \
The background color for pill-styled navigation items, applicable if pill navigation is enabled.

***

### Off-Canvas Top

A menu type that pulls down from the top of the screen.​

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Ff1CGZ9u4ocGaU8uJmYZt%2FHeader%20Style%20-%20Off%20Canvas%20Top.jpg?alt=media&#x26;token=d7d2acee-4553-4127-bfc1-874a9be0995d" alt="" width="324"><figcaption><p>Off-Canvas Top style options</p></figcaption></figure>

**Background**\
The background color of the menu container.

**Links** \
The color settings for the menu links in their different states: ***normal***, ***hover***, and **active**.

**Text** \
The color settings for other text elements within the menu container.