• Documentations
  • Introduction
  • Tooling Setup
• SCSS / CSS
  • SCSS File Structure
  • Customizing
• HTML
  • Base / Starter HTML
  • Header HTML
  • Nav HTML
  • Section HTML
• Sections
  • Listing
  • Listing Types
  • Searchbox
  • Cities
  • News
  • Testimonial
  • See How
  • Callout

Header HTML

Basic header html code are looks like this:

<header class="header">
  
  <!-- (optional) Nav Goes Here  -->
  
  <!-- (optional) HEADER SECTIONS goes here  -->

</header>

To make the header sticky on scroll, add data-spy="scroll" data-scroll="sticky"

<header class="header is-sticky-inverse is-sticky-bg-o-0" data-spy="scroll" data-scroll="sticky" data-sticky-hide="true" data-switch-class="shadow-none|shadow">
  
  <!-- (optional) Nav Goes Here  -->
  
  <!-- (optional) HEADER SECTIONS goes here  -->

</header>

• data-sticky-hide="true" is to make the entire header hidden when scrolled down, and apper if scrolled up.

• data-sticky-hide="true" data-switch-class="shadow-none|shadow" toogle extra class to header, when is sticky top or not.

• Add is-sticky-inverse to header's class attribute value to make the header and navbar inside the header color inverted when sticky is activated (and on scrolled top).

• Add is_sticky_bg_o_0 to header's class attribute value to make the header bg background color opacity to 0 when sticky is activated (and on scrolled top).