# Layout and style

Change the look and layout of the header.

* Change the header colors.
* Change the **Layout** of the logo and menu
* Enable the **Sticky header** to fix it to the top of the page
* Change the **Cart icon** to a bag or cart
* Show a **Border** at the bottom of the header

## Change header colors

***

Go to **Theme settings > Colors** to change the text and background colors of the header.

 

## Choose header layout

***

Change the layout of the logo, search bar, and menu for both desktop and mobile.

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-f755a21a04e80ba9a4f5d81af7748847e24d7970%2Fheader-menu-layouts.jpeg?alt=media" alt="" width="563"><figcaption></figcaption></figure>

&#x20;

`Click Header section to find settings`

<table><thead><tr><th width="154">Setting</th><th width="310">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Header layout</mark></td><td>Change the position of the logo and menu in the header.</td><td><strong>Logo center, menu below</strong><br><strong>Logo left, menu left</strong><br><strong>Logo left, menu below</strong><br><strong>Logo center, menu left</strong><br><strong>Logo left, menu below</strong></td></tr></tbody></table>

&#x20;

## Enable sticky header

***

The **Sticky header** option fixes the Header to the top of the screen or window when customers scroll down the page.

&#x20;

`Click Header section to find settings`

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable sticky header</mark></td><td>Choose to fix the Header to the top of the screen or window so it remains visible when visitors scroll down the page.</td></tr></tbody></table>

&#x20;

## Change cart icon

***

Choose to display the cart icon as either a **Cart** or **Bag**.

&#x20;

`Click Header section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Cart icon</mark></td><td>Select an icon style for the cart in the header.</td><td><strong>Cart</strong><br><strong>Bag</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr></tbody></table>

## Display bottom border

***

Choose to display a think or thick border at the bottom of the header.

&#x20;

`Click Header section to find settings`

<table><thead><tr><th width="178">Setting</th><th width="405">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Separator style</mark></td><td>Display a border at bottom of the header.</td><td><strong>No border</strong><br><strong>Thin border</strong><br><strong>Thick border</strong></td></tr></tbody></table>