Sticky Header

Engage your Visitors by using Interactive Sticky Headers

Settings

Setting Description
.no-sticky

Applying this Class will deactivate the Sticky Header

data-sticky-offset

Enables Sticky Header after a defined offset from the Top

Option(s): number (in px), full

Ex: data-sticky-offset="200"

data-sticky-offset-negative

Defines a Negative Offset for the Sticky Header. Used when the Sticky Offset is set to full

Ex:

<header id="header" class="full-header transparent-header" data-sticky-offset="full" data-sticky-offset-negative="100">

data-sticky-shrink

Enables Shrinking feature on the Header when Sticky

Option(s): true, false

Ex: data-sticky-shrink="false"

data-sticky-shrink-offset

Enables Shrinking feature after the Sticky Header reaches the defined offset

Ex: data-sticky-shrink-offset="400"

data-sticky-logo-height

Defines a Custom Height for the Sticky Header when Sticky Shrink feature is set to true. This will not work when Header Sizes are used.

Ex: data-sticky-logo-height="70"

data-sticky-menu-padding

Defines a Custom Top/Bottom Padding for the Parent Menu Items when Sticky Shrink feature is set to true. This will not work when Header Sizes are used.

Ex: data-sticky-menu-padding="70"

data-sticky-class

Applies a Defined Class on the Sticky Header

Option(s): dark, not-dark, bg-color, etc.

Ex: data-sticky-class="not-dark"

Logos on Sticky Header

Check this Example for using an Alternate Logo on Sticky Headers: http://docs.semicolonweb.com/docs/getting-started/logo-settings/#docs-snippet-sticky-logo

data-mobile-sticky

Enables Sticky Headers on Mobile Devices

Option(s): true, false

Ex: data-mobile-sticky="true"

Last Modified: July 5, 2020