> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/header/header/layout-and-style.md).

# Layout and style

Customize the look of the **Header** in the section settings.

* Choose color scheme for header
* 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

## Choose color scheme

***

Use the **Color scheme** picker to change the color scheme. You can edit and add color schemes in your theme settings.

## Choose header layout

***

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

`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 left menu left</strong><br><strong>Logo left menu center</strong><br><strong>Logo center menu left</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Logo center drawer menu</strong></td></tr><tr><td><mark style="color:blue;">Width</mark></td><td>Set the content width of the header contents. This setting applies to the mega menu as well</td><td><strong>Page width</strong><br><strong>Full width</strong></td></tr></tbody></table>

## Enable sticky header

***

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

{% hint style="info" %}
The Delayed transition style will vary depending on the Announcement bar and Impact logo:

* If there’s a sticky announcement bar, then sticky header appears immediately.
* If Impact logo is present, sticky header appears after scrolling past the impact logo.
* If there’s no sticky announcement bar or impact logo, sticky header appears when header is out of view.
  {% endhint %}

`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><tr><td><mark style="color:blue;">Sticky transition style</mark></td><td>Choose to stick the header instantly or delay showing the sticky header until scrolling down.</td></tr></tbody></table>

## Change cart icon

***

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

`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>Change the icon style for the cart in the header.<br><br><strong>No icon</strong> shows a simple button with the item count.</td><td><strong>Cart</strong><br><strong>Bag</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>No icon</strong></td></tr></tbody></table>