Skip to content

Header Elements

Since AppStrap 3.1 the header has been reworked to make the most of the new Flexbox functionality added to Bootstrap making header layouts and vertical alignment easier.

The following functionality can be applied to both .header-upper and .header regions.

All elements must be inside of a wrapper element with the class .header-inner .

If you are not using Flexbox this functionality is still available using floats and display table CSS properties but the results are far better with Flexbox.

Header Inner

Class name: .header-inner

Header inner is the required wrapper for all the header elements below. Using flexbox is sets all direct children to align right apart from the .header-brand element which aligns left.

Header Brand

Class name: .header-brand

Header brand is automatically aligned to the left of the header. There is also a subclass of this called .header-brand-text which can be used within the .header region to apply the AppStrap logo style.

Header Block

Class name: .header-block

Header block elements automatically horizontally and vertically align all direct child elements within it from the md screenwidth upwards.

Header Block Flex

Class name: .header-block-flex

Header block flex elements automatically horizontally and vertically align all direct child elements within it on all screenwidths.

Header Divider

Class name: .header-divider , .header-divider-sm and .header-divider-lg

Header dividers can be used to provide vertical borders between elements within the header regions.

Default: <div class="header-divider"></div>

Small: <div class="header-divider header-divider-sm"></div>

Large: <div class="header-divider header-divider-lg"></div>


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.

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page