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>