> 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/stiletto/pages/header/layout-and-style.md).

# 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

### <mark style="color:$primary;">Change header colors</mark>

Select a color scheme to change the text and background colors of the header.

### <mark style="color:$primary;">Choose header layout</mark>

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

<figure><img src="/files/4dL4K09g1xXnT8J331Sx" alt="" width="563"><figcaption></figcaption></figure>

<sub><mark style="color:$info;">Click Header section to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Enable sticky header</mark>

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

<sub><mark style="color:$info;">Click Header section to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Change cart icon</mark>

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

<sub><mark style="color:$info;">Click Header section to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Display bottom border</mark>

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

<sub><mark style="color:$info;">Click Header section to find settings<mark style="color:$info;"></sub>

<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>