Layouts
Last updated
Last updated
In this section, you’ll learn how to create a header using the pre-defined layout types.
Selecting a pre-defined header type only impacts the main row by setting the menu type in use.
This approach is based on the original version of Kalium, which users are familiar with for setting up headers. For a more advanced structure, you can always create a header type, which will be explained in the upcoming article.
This header type will either show navigation menu with plain links and their sub menus, or the toggle button that shows/hides the links when animation when clicked.
Hamburger Menu When checked, the header will include a menu toggle button (alternatively called Hamburger Menu toggle) which will display the navigation links besides the button on the left side.
Animation This option appears after enabling the Hamburger Menu and controls the animation for showing and hiding the root-level navigation links.
This header type will display only the Hamburger Menu toggle, which, when clicked, reveals the navigation menu as an overlay with a smooth animation.
Content Alignment The placement of the navigation menu determines its layout: the Left and Centered options display menu links as a vertical list, while the Horizontal option arranges menu items in a horizontal row.
Search Field Optionally, you can add a search bar as the last item in the menu, allowing users to search your site easily.
This header type displays a that toggles the menu with a drawer animation from either the left or right side. It can also include widgets in addition to the default navigation.
Menu The navigation menu to show or hide completely by selecting (No menu) option.
Widgets Choose whether to display widgets within the menu container. The widgets displayed here are sourced from the Off-Canvas Side sidebar.
Alignment Adjust the alignment of the menu container, by default opens from right side.
Force Include
This option is rarely used, but in case you want the menu to be triggered by a different element on page, you can do so by adding a class .sidebar-menu-toggle to the element that will trigger the Off-Canvas Side menu.
This header type is similar to previous type which displays a that toggles the menu from the top of window. It can also include widgets in addition to the default navigation.
Menu The navigation menu to show or hide completely by selecting (No menu) option.
Items per Row Divides the navigation menu items into columns within each row.
Widgets Choose whether to display widgets within the menu container. The widgets displayed here are sourced from the Off-Canvas Top sidebar.
Columns Determines how many columns the widgets are divided into.
Container Defines the size of the widget container relative to the Menu Container.
Force Include
This option is rarely used, but in case you want the menu to be triggered by a different element on page, you can do so by adding a class .top-menu-toggle to the element that will trigger the Off-Canvas Top menu.
