Header
Last updated
Was this helpful?
Last updated
Was this helpful?
1. Header Element: Enable or disable elements in the header
2. Module Position: Provide a position where you want to display the header in the front end.
3. Header Modes: There are 3 main header modes: Horizontal Menu, Stacked Menu, and Sidebar Menu.
a) Horizontal Menu Mode: Here you have 3 different modes:
Left: The logo and the menu items are positioned to the left and the header block is to the right
Center: Here the logo is to the left, menu items are in the center and the header block is on the right
Right: Here the logo is to the left, the menu items and header block are to the right
b) Header Block 1 / Header Block 2: Choose what you want to display in the header blocks from the given options in the dropdown that is:
Blank: Leave a blank space
Module Position: Publish a module whose position you can choose in the next option Block Position 1
Custom HTML: You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML
a) Stacked Menu Mode: Here you have 5 different modes:
Center Balance: The logo is in the center, and header positions 1 and 2 are placed side along the logo on the left and the right. The menu is right under the logo
Stacked Center: The logo, menu items, and header block are all aligned together vertically one on top of the other. You can again choose the content for the header block in the next option:
Stacked Separated: Here the logo and two header blocks are in the center.
Stacked Divided: Here the logo is to the left, menu items are in the center, and the header block is on the right
Stacked Divided Logo Left: The logo is on the left of the first column, header positions 1 and 2 are placed on the first row, and the menu is on the second row of the other column.
b) Odd number menu item position
When you select Stacked Separated it displays an extra option of Odd number menu item position to select where you want to display the extra menu item: Select where you want to place the extra menu item in case of Odd number of menu items.
c) Header Block 1– Here you have 3 different options:
Blank: Leave a blank space.
Module Position: Publish a module whose position you can choose from the dropdown Block Position 1.
Custom HTML: You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML.
d) Header Block 2: Here you have 3 different options:
Blank: Leave a blank space.
Module Position: Publish a module whose position you can choose from the dropdown Block Position 2.
Custom HTML: You can also publish a custom HTML in the header block, simply writing your code in the next option Block 2 Custom HTML.
a) Sidebar Menu Modes
Here you have 3 different modes:
Sidebar Left: The logo, menu items, module 1 and module 2 are all positioned to the left.
Sidebar Right: The logo, menu items, module 1 and module 2 are all positioned to the right.
Sidebar with third module: You can choose the position of the sidebar (Left or Right) and add a third module to the menu.
b) Header Block 1: Here you have 3 different options:
Blank: Leave a blank space
Module Position: Publish a module whose position you can choose from the dropdown Block Position 1
Custom HTML: You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML
4. Site Menu Method: Choose the menu display method. You can now choose to display the Astroid Menu directly as Default or through a Module Position.
5. Site Menu: If you have more than one main menu created then you can choose which menu you want to show on your main site from the dropdown list.
6. Start Level: The level to start rendering the menu at. Setting the start and end levels to the same level will only display that single level.
7. End Level: You can even set up to which level you want to show the sub-menu items. By default, it is set to “ALL” which means all the sub-menu items will be visible.
8. Header Breakpoint: Choose a breakpoint so the header will collapse when the width is less than the selected breakpoint parameter. The lg is set as default breakpoint to suit most of the cases.
9. Mobile Menu: You also choose which menu you want to show on the mobile view of your site if you have 2 or more menus created.
10. Dropdown Trigger: Choose the action to view the dropdown menu or the mega menu that is either on Hover or Click.
11. Dropdown Arrow: Choose whether you want to show the dropdown arrow or not.
