# Header

> A flexible header builder with logo, menu, search, account and cart icons, an announcement bar, sticky scroll and a mobile drawer. Choose from multiple layout presets.

URL: https://sectionstar.app/sections/header/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.889Z

---

**Header** is a Shopify theme section in the Section Star library. A flexible header builder with logo, menu, search, account and cart icons, an announcement bar, sticky scroll and a mobile drawer. Choose from multiple layout presets.

## Live demo

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Layout
| Setting | Type | Default |
| --- | --- | --- |
| Layout | Select (Logo left, menu beside, Logo left, icons right (no inline menu), Logo center, menu left, Logo center, menu below, Logo center, menu split) | logo-left |
| Menu Alignment | Select (Left, Center, Right) | left |
| Max Width | Number | 1200 |
| Padding Top/Bottom | Number | 16 |
| Padding Left/Right | Number | 24 |
| Column Gap | Number | 24 |
| Mobile Breakpoint (px) | Number | 800 |

### Colors
| Setting | Type | Default |
| --- | --- | --- |
| Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Bottom Border Size | Number | 1 |
| Bottom Border Color | Color | #eee |

### Logo
| Setting | Type | Default |
| --- | --- | --- |
| Logo Image | Image | — |
| Logo Text (if no image) | Text | — |
| Logo Text Size | Range | 24 |
| Logo Text Color | Color | #111 |
| Logo Width | Range | 140 |
| Mobile Logo Width | Range | 110 |

### Menu
| Setting | Type | Default |
| --- | --- | --- |
| Override Theme Font | Checkbox | Off |
| Menu Font | Font | sans-serif |
| Menu Text Size | Range | 15 |
| Menu Font Weight | Select (Normal, Medium, Semibold, Bold) | 500 |
| Uppercase | Checkbox | Off |
| Letter Spacing | Range | 0 |
| Gap Between Menu Items | Number | 24 |
| Menu Text Color | Color | #111 |
| Menu Hover Color | Color | #666 |
| Menu Hover Style | Select (Color change, Underline) | underline |

### Icons
| Setting | Type | Default |
| --- | --- | --- |
| Show Search | Checkbox | On |
| Show Account | Checkbox | On |
| Show Cart | Checkbox | On |
| Show Cart Count | Checkbox | On |
| Icon Size | Range | 22 |
| Gap Between Icons | Number | 16 |
| Icon Color | Color | #111 |
| Cart Count Background | Color | #111 |
| Cart Count Text Color | Color | #fff |

### Sticky
| Setting | Type | Default |
| --- | --- | --- |
| Sticky on Scroll | Checkbox | On |
| Stick After Scrolling (px) | Number | 200 |
| Sticky Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Z-Index | Number | 9990 |

### Announcement Bar
| Setting | Type | Default |
| --- | --- | --- |
| Show Announcement Bar | Checkbox | Off |
| Announcement Text | Inline rich text | Free shipping on orders over $75 |
| Announcement Background | Color or gradient | linear-gradient(164deg, #111 0%, #111… |
| Announcement Text Color | Color | #fff |
| Announcement Text Size | Range | 13 |
| Announcement Padding | Number | 10 |

### Mobile Drawer
| Setting | Type | Default |
| --- | --- | --- |
| Drawer Side | Select (Left, Right) | left |
| Drawer Width | Number | 320 |
| Drawer Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Drawer Text Color | Color | #111 |
| Drawer Divider Color | Color | #eee |
| Drawer Text Size | Range | 18 |

### Menu Link block settings

| Setting | Type | Default |
| --- | --- | --- |
| Label | Text | Link |
| URL | URL | — |