Helper Classes

Use these handy Helper Classes with the Headers making them more flexible than you can imagine.

Settings

Setting Description
.no-sticky

Disable Stickiness of the Header. Use it on the header tag.

.static-sticky

>Disable Resizing when Headers turn Sticky. Use it on the header tag.

data-sticky-class

Use a different Header Style when it gets Sticky. This will look something like this:

Example:

<header class="dark" data-sticky-class="not-dark">
You can use these classes: .dark, .not-dark, .semi-transparent.

Note:if you use the .semi-transparent Class, then you'll also need to include the .transparent Class.
.not-dark

This is a Handy Class, if you want to use Mixins. Suppose, You want to use the Dark Header Style, but dont want the Dropdown Menus to be Dark too, then you can simply add this class to the Primary Menu and you are good to go.

Example:

<nav id="primary-menu" class="not-dark">

data-sticky-offset

This Attribute is used to Define after how many Pixels you want your Header to be Sticky.

Example:

<header data-sticky-offset="100">
This will make the Header Sticky after scrolling down 100px. You can also set full value if you want the Header to be Sticky after scrolling Full Screen.

Last Modified: June 2, 2020