Helper Classes

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


Setting Description

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


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


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


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

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.


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


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


<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