Header Component
4 min
Overview
The Header Component is the section at the top of the page that will display the website's name and navigation.
Header component - Page structure
Sample Header Component
Header component - Preview
General
Here you can customize the look and content of your main website header.
- 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 Group name : Add your retailer group name 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
- Color of close icon in warning : Set the color of the close icon
- Text of warning : Add the text visible in the banner
- 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
- 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
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.
Header component -