Header Types

You can choose between 7 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element will activate the Header Type. The list of Header Type Classes & its descriptions are provided below for your reference:

Settings

Setting Description
Default

Default Header with a White Background & Dark text.

Ex: 

<header id="header">
	...
</header>
.dark

Header with a Dark Background & Light text.

Ex: 

<header id="header" class="dark">
	...
</header>
.transparent-header

Header with a Transparent Background. This header is effective for showing Sliders or other types of Hero Images on the Top with a Transparent Logo & Menu. You can add the dark class for a Light Colored Text.

Ex: 

<header id="header" class="transparent-header">
	...
</header>
.semi-transparent

Header with a Semi Transparent Background. You can add the dark class for a Light Colored Text & a Dark Background.

Ex: 

<header id="header" class="transparent-header semi-transparent">
	...
</header>
.floating-header

This activates the Floating Header. You can add the dark class for a Light Colored Text & a Dark Background.

Ex: 

<header id="header" class="transparent-header floating-header">
	...
</header>
.side-header

This is a Side Header Left Aligned. Unlike the above Headers, this class should be added to the body.

Ex: 

<body class="stretched side-header">
	<header id="header">
		...
	</header>

	...

</body>
.open-header

This is a Side Header Left Aligned which is hidden by default & opens via a Trigger. Unlike the above Headers, this class should be added to the body. This class can only be used for the Side Headers. If you want to close the Side Header on scrolling, please add the .close-header-on-scroll class to the body tag.

Ex: 

<body class="stretched side-header open-header">
	<header id="header">
		...
	</header>

	...

</body>
.push-wrapper

This is a Side Header Left Aligned which is hidden by default & opens via a Trigger. When the Header opens, it also pushes the wrapper to the right. Unlike the above Headers, this class should be added to the body. This class can only be used for the Side Headers. If you want to close the Side Header on scrolling, please add the .close-header-on-scroll class to the body tag.

Ex: 

<body class="stretched side-header open-header push-wrapper">
	<header id="header">
		...
	</header>

	...

</body>
.side-header-right

This is a Side Header Right Aligned. Unlike the above Headers, this class should be added to the body. You can easily add the .open-header & .push-wrapper classes to the body tag to make this Side Header follow the above behaviours.

Ex: 

<body class="stretched side-header side-header-right">
	<header id="header">
		...
	</header>

	...

</body>

Last Modified: June 2, 2020

Need Help?