Header Sticky Elements

AppStrap version 3.0.9 added a load of new "sticky" classes to allow for better and flexible control over header elements when the header becomes sticky. This is includes changing the header colour scheme, background & text colours as well as spacing.

In classes are prefixed with .sticky- and can be applied to the .header element directly or any other elements within a sticky wrapper. This gives you a whole new level of freedom to control you header styling.

Sticky display utilities

Control or override element display properties on sticky using the following display classes:

Classes avaliable are: .sticky-d-none , .sticky-d-flex , .sticky-d-inline-flex , .sticky-d-table , .sticky-d-table-cell , .sticky-d-block , .sticky-d-inline , or .sticky-d-inline-block

All classes are responsive using the following pattern allowing you to show and hide elements per breakpoint: .sticky-d-(sm|md|lg|xl)-(none|flex|inline-flex|table|table-cell|block|inline-block)

Sticky header effects

Work in-progress: documentation on these is coming soon. See index-magazine.html header for an example.

Sticky header schemes

You now have the following sticky classes to set the header colour scheme on sticky:

.sticky-header-light = light background & dark content & .sticky-header-dark = dark background & light content.

Sticky background, text & border colours

Prefix any of the colour utilities with .sticky- to override & set colours on sticky. You can also combine this with Sticky header schemes above.

Sticky opacity utilities

Prefix any of the opacity utilities with .sticky- to override & set opacity, background opacity & border opacity on sticky.

Sticky spacing

Prefix any of the spacer utilities with .sticky- to override & set element margins & padding on sticky.