# Header ### Section overview The theme header section renders the site header with navigation, logo, search, and action buttons like cart and account login. It provides a fully responsive experience with separate layouts for desktop and mobile views. #### Common use cases * Main site navigation with dropdown menus * Store branding with customizable logo * Quick access to cart, account, and search functionality * Feature promotional content within dropdown menus #### Usage tips * Keep menu items concise to prevent overcrowding on mobile devices * Use consistent button styles (icon, text, or both) for a unified look * Consider logo size carefully for both desktop and mobile views * Test dropdown menus with various content types to ensure proper layout ### Section settings | Setting | Description | | ---------------------- | ------------------------------------------------------------------------------------------- | | Dropdown menu | The menu to use for navigation items with dropdown functionality | | Logo | The primary logo image displayed in the header | | Desktop logo height | Height of the logo on desktop devices (in pixels) | | Mobile logo height | Height of the logo on mobile devices (in pixels) | | Enable logo on desktop | Option to show or hide the logo on desktop views | | Default color scheme | The background and text color scheme for the header | | Default color border | The border color style for the header | | Search input | Controls when the search input is displayed (always, desktop only, mobile only, or never) | | Cart button | Display style for the cart button (none, icon and text, icon only, or text only) | | Login button | Display style for the login button (none, icon and text, icon only, or text only) | | Menu button desktop | Display style for the menu button on desktop (none, icon and text, icon only, or text only) | | Menu button mobile | Display style for the menu button on mobile (none, icon and text, icon only, or text only) | | Text capitalization | Text style for capitalization (standard, uppercase, or lowercase) | | Font family | Font style to use in the header (standard, heading, or navigation) | | Link as button | Option to make dropdown links function as buttons instead of normal links | | Enable margin | Option to apply horizontal margin to the header | | Color scheme | Background and text color scheme for dropdown menus | | Color border | Border color style for dropdown menus | | Visibility | Controls when the header is displayed (all devices, mobile only, or desktop only) | ### Block settings #### Button This block adds a featured button to the header's right side, useful for highlighting important promotions or actions. Limit: 1 button per header | Setting | Description | | ------------ | ----------------------------------------- | | Button label | Text displayed on the button | | Button URL | The page the button links to when clicked | | Color button | Style and color scheme for the button | #### Content This block adds rich content to dropdown menus, allowing for enhanced navigation with images, videos, and promotional content. Limit: 10 content blocks per header | Setting | Description | | --------------------- | ----------------------------------------------------------------- | | Linked menu | The menu handle this content should appear in | | Heading | Title text for the content block | | Content | Rich text content for the block | | Button label | Text for the optional button | | URL | The link destination for the block or button | | Image | Primary image to display in the content block | | Image background | Background image for the content block | | Video | Video file to display in the content block | | Enable video autoplay | Option to automatically play the video | | Enable mute button | Option to show a mute toggle for the video | | Enable video loop | Option to loop the video playback | | Minimum height | Sets the minimum height for the content block (in pixels) | | Enable padding | Option to add padding to the content | | Color scheme | Background and text color scheme for the content block | | Color text | Text color treatment (default, force light, or force dark) | | Color border | Border styling for the content block | | Color button | Style and color for the content block button | | Enable gradient | Option to add a gradient effect to the background | | Y alignment | Vertical alignment of content (top, middle, or bottom) | | X alignment | Horizontal alignment of content (left, center, justify, or right) | | Text position | Placement of text relative to media (above or below) | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.brickspacelab.com/keystone/sections/sitewide/header.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.