Header Styles

1. General Header Info


You can add maximum three header sections( .header-section ) that can have individual styles and behaviour.

Header sections will be defined in the following order:

  • .ths - for top header section

  • .mhs - for middle header section

  • .bhs - for bottom header section


<header class="header-section ths"> ... </header>
<header class="header-section mhs"> ... </header>
<header class="header-section bhs"> ... </header>

Structure

Header structure is as follows:

Each .header-section has three .header-item containers. Header-items containers can be configured individually with the help of these classes: 


<header class="header-section ths">
    <div class="header-content">
        <div class="ui container grid">
            <div class="header-item"> ... </div>
            <div class="header-item"> ... </div>
            <div class="header-item"> ... </div>
        </div>
    </div> 
</header>


Alignment

You can set left/right alignment, relative to the .header-item container and depending on screen resolution.
By default the .header-item elements are centered.

  • .flex-align-left or .flex-align-right - left / right alignment on all resolutions
  • .flex-align-mobile-left or .flex-align-mobile-right - left / right alignment on mobile only
  • .flex-align-tablet-left or .flex-align-tablet-right - left / right alignment on tablet only
  • .flex-align-desktop-left or .flex-align-desktop-right - left / right alignment on desktop only
  • .flex-align-large-desktop-left or .flex-align-large-desktop-right - left / right alignment on large-desktop only

<header class="header-section ths">
    <div class="header-content">
        <div class="ui container grid">
            <div class="header-item"> ... </div>
            <div class="header-item flex-align-left"> ... </div>
            <div class="header-item"> ... </div>
        </div>
    </div> 
</header>


Order

You can set the order for .header-item depending on screen resolutions.

  • .flex-order-mobile-first - first in order on mobile
  • .flex-order-mobile-second - second in order on mobile
  • .flex-order-mobile-third - third in order on mobile

  • .flex-order-tablet-first - second in order on tablet
  • .flex-order-tablet-second - second in order on tablet
  • .flex-order-tablet-third - third in order on tablet

  • .flex-order-tablet-first - second in order on desktop
  • .flex-order-tablet-second - second in order on desktop
  • .flex-order-tablet-third - third in order on desktop

  • .flex-order-tablet-first - second in order on large-desktop
  • .flex-order-tablet-second - second in order on large-desktop
  • .flex-order-tablet-third - third in order on large-desktop

<header class="header-section ths">
    <div class="header-content">
        <div class="ui container grid">
            <div class="header-item flex-order-tablet-second flex-order-mobile-second">
                ... 
            </div>
            <div class="header-item flex-align-left flex-order-tablet-first flex-order-mobile-first">
                ... 
            </div>
            <div class="header-item flex-order-tablet-first flex-order-mobile-first"> ... </div>
        </div>
    </div> 
</header>


Grow

You can set grow property for .header-item also by screen resolutions.

  • .flex-grow-true - grow is active on all resolutions
  • .flex-grow-false - grow is inactive on all resolutions

  • .flex-grow-true - grow is active on mobile
  • .flex-grow-false - grow is inactive on mobile

  • .flex-grow-true - grow is active on tablet
  • .flex-grow-false - grow is inactive on tablet

  • .flex-grow-true - grow is active on desktop
  • .flex-grow-false - grow is inactive on desktop

  • .flex-grow-true - grow is active on large-desktop
  • .flex-grow-false - grow is inactive on large-desktop

<header class="header-section ths">
    <div class="header-content">
        <div class="ui container grid">
            <div class="header-item flex-order-tablet-second flex-order-mobile-second flex-grow-tablet-true flex-grow-mobile-true"> ... </div>
            <div class="header-item flex-align-left flex-order-tablet-first flex-order-mobile-first flex-grow-large-desktop-true flex-grow-desktop-true flex-grow-tablet-false flex-grow-mobile-false"> ... </div>
            <div class="header-item flex-order-tablet-first flex-order-mobile-first flex-shrink-true"> ... </div>
        </div>
    </div> 
</header>


Shrink

You can set shrink property for .header-item also by screen resolutions.

  • .flex-grow-true - shrink is active on all resolutions
  • .flex-grow-false - shrink is inactive on all resolutions

  • .flex-grow-true - shrink is active on mobile
  • .flex-grow-false - shrink is inactive on mobile

  • .flex-grow-true - shrink is active on tablet
  • .flex-grow-false - shrink is inactive on tablet

  • .flex-grow-true - shrink is active on desktop
  • .flex-grow-false - shrink is inactive on desktop

  • .flex-grow-true - shrink is active on large-desktop
  • .flex-grow-false - shrink is inactive on large-desktop

Styling

Each header section can have an unique styling by simply changing less variables from "header-section-module.less".

For example, .ths-header, we can change the following:

  • Background Color - changing @topHeaderSectionBackgroundColor variable

  • Height - changing @topHeaderSectionHeight variable

  • Height for Mobile - changing @topHeaderSectionHeightMobile variable

2. Header Width


Header Default

Default header width is 100% and its content width will be as long as the .container element.

Header Boxed

Applying the .header-boxed class, header-section as well as its content will be as long as the .container element width.

Header Full Width

Applying .header-fullwidth class, header-section as well as the content will have 100% width.


<header class="header-section ths header-boxed">
    ... 
</header>

or

<header class="header-section mhs header-fullwidth">
    ... 
</header>
See sample

3. Header Sticky


If we apply .header-sticky class to a .header-section element, this will become sticky the moment it reaches window top.


<header class="header-section ths header-sticky">
    ... 
</header>
Header sticky example 01 Header sticky example 02

4. Header Resize


If we apply .header-resize class to a .header-section element, this will change its height on scroll but only if the distance to Top window is greater than the scroll offset.
Warning: This option works only when used with .header-sticky class

Height

Resizing .header-section will go from initial height (ex: @topHeaderSectionHeight) to resize height (@topHeaderSectionHeightResize).

Responsive

This option has no effect on mobile.
.header-section on mobile will take the height from its mobile height variable (ex: @topHeaderSectionHeightMobile).

Offset

Scroll offset is done by changing the value of the variables: topHeaderSectionResizeOffset, middleHeaderSectionResizeOffset and bottomHeaderSectionResizeOffset and function.js .


<header class="header-section ths header-sticky header-resize">
    ... 
</header>
Header resize example 01 Header resize example 02

5. Header Slide Up


If we apply .header-slide-up class to a .header-section element, the element will hide after the distance from the top will be greater than the scroll offset and will appear when scrolling up.

Warning: This option works only with .header-sticky class

Responsive

This option has effect on mobile resolution too.

Offset

Slide up offset can be set by changing the value of these variables: topHeaderSectionSlideUpOffset, middleHeaderSectionSlideUpOffset and bottomHeaderSectionSlideUpOffset. from function.js .


<header class="header-section ths header-sticky header-slide-up">
    ... 
</header>
Header slide up example 01 Header slide up example 02

6. Header Transparent


If we apply .header-transparent and .is-transparent classes to a .header-section element, it will have the transparent background until top distance will be greater than the transparent scroll offset.

Warning: This works only with .header-sticky class

Responsive

This option has effect on mobile resolution too.

Offset

Transparent offset can be set by changing the value of these variables: headerSectionTransparentOffset. from function.js . This offset is available for all three header sections(.ths, .mhs, .bhs)


<header class="header-section ths header-sticky header-transparent is-transparent">
    ... 
</header>
Header transparent example 01 Header transparent example 02