HyperBuilder
...
Blocks
Documentation Draft

Header Component

5min

Overview

The Header Component is the section at the top of the page that will display the website's name and navigation.

Document image


Preview Header Component

Header component - Preview
Header component - Preview


General

Here you can customize the look and content of your main website header.

Header component - General settings
Header component - General settings

  1. Background : pick a background color from the rectangular box
  2. Buttons align direction : Align your buttons horizontal or vertical
  3. Retailer picker dialog text : Add your own text here
  4. Retailer dropdown dialog text : Text that will be visible on the dropdown menu
  5. Enable/disable warning banner : This will add an extra banner on top of your main header
  6. Enable/disable top menu : Enable of disable the top menu
  7. Enable/disable retailer selection logic : Remove retailer selection dropdown from header
  8. Allow close warning banner : Add close button to warning banner
  9. Background color of warning : Pick the background color for the warning banner
  10. Text of warning : Add the text visible in the banner
  11. Mobile Menu title : Add a title, only visible on mobile.

Navigation

Use the 'Navigation' sections to manage this component according to your preferences.

Header component - Navigation settings
Header component - Navigation settings

  1. Manage top menu : Select what to display in the top menu
  2. Manage main menu : Select which pages to display in your main menu
  3. Buttons align : Align buttons to the left, center or right

Buttons

You can add buttons by clicking on the + Add button on the right side of the screen. Cards are used to specify the content of each button.

Document image