HyperBuilder
...
Blocks
Documentation Draft
Header Component
5min
The Header Component is the section at the top of the page that will display the website's name and navigation.


Header component - Preview
Here you can customize the look and content of your main website header.

Header component - General settings
- Background : pick a background color from the rectangular box
- Buttons align direction : Align your buttons horizontal or vertical
- Retailer picker dialog text : Add your own text here
- Retailer dropdown dialog text : Text that will be visible on the dropdown menu
- Enable/disable warning banner : This will add an extra banner on top of your main header
- Enable/disable top menu : Enable of disable the top menu
- Enable/disable retailer selection logic : Remove retailer selection dropdown from header
- Allow close warning banner : Add close button to warning banner
- Background color of warning : Pick the background color for the warning banner
- Text of warning : Add the text visible in the banner
- Mobile Menu title : Add a title, only visible on mobile.
Use the 'Navigation' sections to manage this component according to your preferences.

Header component - Navigation settings
- Manage top menu : Select what to display in the top menu
- Manage main menu : Select which pages to display in your main menu
- Buttons align : Align buttons to the left, center or right
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.

Updated 06 Aug 2024
Did this page help you?