# Header

### Section overview

The header section controls the site navigation, logo, search functionality, and cart display across both mobile and desktop views.

#### Common use cases

* Main site navigation with dropdown menu capabilities
* Brand identity representation with customizable logo
* Access points for search, account, and cart functionality

#### Usage tips

* Keep navigation labels concise for better mobile display
* Use appropriate icon or text buttons based on your brand style
* Consider dropdown content carefully to avoid overwhelming users
* Test header layout in both desktop and mobile views to ensure optimal display

### Section settings

| Setting                 | Description                                                  |
| ----------------------- | ------------------------------------------------------------ |
| Dropdown menu           | Select the menu to display in the header navigation          |
| Search recommendations  | Select a menu for search recommendations                     |
| Logo                    | Upload your store logo                                       |
| Desktop logo height     | Set the height of your logo on desktop (in pixels)           |
| Mobile logo height      | Set the height of your logo on mobile (in pixels)            |
| Color scheme            | Select the color scheme for the header bar                   |
| Color border            | Choose the border style for the header                       |
| Bar layout desktop      | Select how the header elements are arranged on desktop       |
| Cart button             | Choose whether to display cart as icon or text               |
| Search button           | Choose whether to display search as icon or text             |
| Login button            | Choose whether to display login as icon, text, or hide it    |
| Menu button             | Choose whether to display menu as icon or text (mobile only) |
| Show search button      | Enable or disable search functionality                       |
| Show search icon mobile | Choose to show search icon on mobile                         |
| Enable click dropdown   | Enable dropdown menus to open on click instead of hover      |
| Dropdown color scheme   | Select the color scheme for dropdown menus                   |
| Dropdown color border   | Choose the border style for dropdown menus                   |
| Search color scheme     | Select the color scheme for the search overlay               |
| Search color border     | Choose the border style for the search overlay               |
| Visibility              | Control which devices display this section                   |

### Block settings

#### Content

This block allows you to add promotional content within dropdown menus to enhance navigation with images and text.

Block limit: 10

| Setting     | Description                                            |
| ----------- | ------------------------------------------------------ |
| Header menu | Enter the menu handle this content should appear under |
| URL         | Set a link for the entire block                        |
| Heading     | Add a title for this content block                     |
| Content     | Add text content using rich text editor                |
| Image       | Upload an image (recommended width: 400px)             |