Header

1. Module Position: Provide the position where you want to display the header in the front end.

2. Header Mode: Provide the position where you want to display the header in the front end.

There are 3 main header modes: Horizontal Menu, Stacked Menu, and Sidebar Menu.

Horizontal Menu Mode

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: 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

Header Block 1 will only work on Desktops, not on tablets and mobile.

Stacked Menu Mode

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 modes:

  • 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 modes:

  • 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

Header Block 1, and 2 will only work on Desktop, not for tablets and mobile.

a) Sidebar Menu Mode– Here you have 2 different modes:

  • Left: The logo, menu items and header block 1 are all positioned to the left.

  • Right: The logo, menu items and header block 1 are all positioned to the right.

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

3. 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.

4. 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.

5. 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.

6. 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.

7. End Level: You can even set up to which level you want to show the sub-menu items in mobile view. By default, it is set to “ALL” which means all the sub-menu items will be visible.

8. Dropdown Trigger: Choose the action to view the dropdown menu or the mega menu that is either on Hover or Click.

9. Dropdown Arrow: Choose whether you want to show the dropdown arrow or not.

Last updated

© Astroid Framework 2023.