### Configure a specific header-row with children and props

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This example demonstrates how to configure an individual `header-row` block, specifically `header-row#1-desktop`. It shows how to add child blocks, such as "telemarketing", and apply properties like `fullWidth` to control the row's behavior and appearance. This enables detailed customization of each header line.

```json
"header-row#1-desktop": {
  "children": [
    "telemarketing"
  ],
  "props": {
    "fullWidth": true
  }
},
```

--------------------------------

### Configure desktop header layout with multiple header-row blocks

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This configuration snippet shows how to define the `header-layout.desktop` block by specifying its child `header-row` blocks. This allows for structuring the desktop header into multiple distinct lines, each capable of holding different content or functionalities. The number of rows should be tailored to specific business requirements.

```json
{
  "header": {
    "blocks": [
      "header-layout.desktop",
      "header-layout.mobile"
    ]
  },
  "header-layout.desktop": {
    "children": [
      "header-row#1-desktop",
      "header-row#2-desktop",
      "header-row#3-desktop",
      "header-row#4-desktop"
    ]
  },
```

--------------------------------

### API Documentation for header-row properties

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This section provides detailed API documentation for the properties available on the `header-row` block. It lists each property, its type, a description of its function, and its default value, enabling developers to understand and configure the behavior and appearance of header rows effectively.

```APIDOC
header-row props:
  zIndex:
    Type: Number
    Description: CSS property that controls the vertical stacking order of elements for overlapping.
    Default value: 0
  sticky:
    Type: Boolean
    Description: Whether the Header margin should be fixed on the layout (true) or not (false)
    Default value: false
  fullWidth:
    Type: Boolean
    Description: Whether the Header should take the full width of the screen or not
    Default value: true
  inverted:
    Type: Boolean
    Description: Whether the row will use the base color (false) or the inverted base color (true) as defined in styles.json.
    Default value: false
```

--------------------------------

### Add store-header app dependency to manifest.json

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This snippet demonstrates how to add the `vtex.store-header` app as a dependency in the `manifest.json` file of a VTEX theme. This crucial step enables the theme to utilize all blocks exported by the `store-header` app.

```json
  dependencies: {
    "vtex.store-header": "2.x"
  }
```

--------------------------------

### Declare header-layout blocks in theme's header configuration

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This JSON snippet illustrates how to declare the `header-layout.desktop` and `header-layout.mobile` blocks within the `header` section of a theme's configuration. These declarations are fundamental for defining how the header will be displayed across different device types, ensuring responsive design.

```json
{
  "header": {
    "blocks": [
      "header-layout.desktop",
      "header-layout.mobile"
    ]
  },
```

--------------------------------

### Configure header-border block in VTEX Store Header

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This JSON configuration demonstrates how to declare the `header-border` block within a `header-row` to add a 1px margin to the store's Header. It also shows a `notification.bar` declaration, illustrating how multiple blocks can be children of a header row.

```json
"header-row#2-desktop": {
  "children": [
    "header-border",
    "notification.bar#home"
  ],
  "props": {
    "fullWidth": "true"
  }
},
"notification.bar#home": {
  "props": {
    "content": "SELECTED ITEMS ON SALE! CHECK IT OUT!"
  }
}
```

--------------------------------

### Centralize children blocks with header-force-center in VTEX Store Header

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This JSON configuration illustrates how to use the `header-force-center` block to centralize its children within a Header row. It shows a `header-row` with various alignment properties and the `header-force-center` containing a `logo` block, ensuring the logo is centered.

```json
"header-row#4-desktop": {
  "props": {
    "blockClass": "main-header",
    "horizontalAlign": "center",
    "verticalAlign": "center",
    "preventHorizontalStretch": true,
    "preventVerticalStretch": true,
    "fullWidth": true
  },
  "children": ["header-force-center"]
},
"header-force-center": {
  "children":[
    "logo#desktop"
  ]
},
"logo#desktop": {
  "props": {
    "title": "Logo",
    "href": "/",
    "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
    "width": "180"
  }
}
```

--------------------------------

### CSS Handles for VTEX Store Header Customization

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This section lists the CSS Handles available for customizing the VTEX Store Header blocks. These handles provide specific hooks for applying custom CSS styles to various elements within the header, allowing for fine-grained control over its appearance.

```APIDOC
| CSS Handles          |
---------------------- |
| `container`          |                       
| `leanMode`           |                        
| `topMenuContainer`   | 
| `topMenuLogo`        |              
| `topMenuSearchBar`   |     
| `topMenuIcons`       |             
| `topMenuCollapsible` |   
| `forceCenter`        |   
| `forceCenterInnerContainer` |   
| `headerBorder` | 
| `headerSpacer` | 
| `headerStickyRow` | 
| `headerRowContentContainer` |
```

--------------------------------

### Add spacing between Header blocks with header-spacer in VTEX Store Header

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This JSON configuration demonstrates the use of the `header-spacer` block to add spacing between other blocks in a Header row. It effectively positions blocks declared before it to the left on the screen, while blocks declared after it will be positioned to the right, creating a visual separation.

```json
"header-row#3-desktop": {
  "children": [
    "vtex.menu@2.x:menu#websites",
    "header-spacer",
    "vtex.menu@2.x:menu#institutional"
  ],
  "props": {
    "blockClass": "menu-link",
    "inverted": "true"
  }
}
```

--------------------------------

### header-border block properties in VTEX Store Header

Source: https://github.com/vtex-apps/store-header/blob/master/docs/README.md

This table describes the available properties for the `header-border` block. The `sticky` property, a boolean, controls whether the Header margin should be fixed in the layout or not, defaulting to `false`.

```APIDOC
| Prop name  | Type      | Description                                                                                       | Default value |
| ---------- | --------- | ------------------------------------------------------------------------------------ | ------------- |
| `sticky` | `Boolean` | Whether the Header margin should be fixed in the layout or not                                                                       | `false`          |
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.