Kinsey

# Header

Header styles may vary from page to page. These can be defined via data- attributes directly in the HTML markup as described below.

TIP

All <header> element attributes (classes, id, data attributes) are updated after each AJAX transition.

# Markup

<header 
  class="header header_fixed container-fluid js-header-sticky" 
  id="page-header" 
  data-arts-theme-text="dark" 
  data-arts-header-sticky-theme="bg-light-1" 
  data-arts-header-logo="primary" 
  data-arts-header-sticky-logo="primary" 
  data-arts-header-sticky-theme-text="dark" 
  data-arts-header-overlay-theme-text="light"
>
  <!-- top bar -->
  <div class="header__container header__controls">
    <div class="row justify-content-between align-items-center">
      <!-- logo -->
      <div class="col-auto header__col header__col-left">
        ...
      </div>
      <!-- - logo -->

      <!-- burger icon -->
      <div class="col-auto header__col d-flex align-items-center">
        ...
      </div>
      <!-- - burger icon -->

      <!-- "back" button for submenu nav -->
      <div class="header__overlay-menu-back" id="js-submenu-back">
        ...
      </div>
      <!-- - "back" button for submenu nav -->

      <!-- slider label -->
      <div class="header__overlay-menu-info header__label header__label_side">
        ...
      </div>
      <!-- - slider label -->
    </div>
  </div>
  <!-- - top bar -->

  <!-- fullscreen overlay container -->
  <div class="header__wrapper-overlay-menu" data-arts-theme-text="light">
  </div>
  <!-- - fullscreen overlay container -->
</header>

# Attributes

  • data-arts-theme-text=[dark | light] – Default state (non-sticky) text color theme.
  • data-arts-header-sticky-theme=[bg-white | bg-light-1 | bg-light-2 | bg-light-3 | bg-light-4 | bg-dark-1 | bg-dark-2 | bg-dark-3 | bg-dark-4] – Background color class that will be appended to the sticky header.
  • data-arts-header-logo=[primary | secondary] – Logo version to show in the default (non-sticky) header.
  • data-arts-header-sticky-logo=[primary | secondary] – Logo version to show in the sticky header.
  • data-arts-header-sticky-theme-text=[dark | light] – Sticky state text color theme.
  • data-arts-header-overlay-theme-text=[dark | light] – Color theme for the opened fullscreen overlay menu.

# Classes

  • .js-header-sticky – Defines if the header should follow the page scrolling.

# Absolute Positioning

To position the header absolutely so it doesn't follow the page scrolling:

  1. Remove .js-header-sticky and .header_fixed classes.
  2. Add the .header_absolute class.
  3. Add the [data-arts-scroll-absolute="true"] attribute.
<header 
  class="header header_absolute container-fluid" 
  id="page-header" 
  data-arts-scroll-fixed="true"
  data-arts-theme-text="dark" 
  data-arts-header-sticky-theme="bg-light-1" 
  data-arts-header-logo="primary" 
  data-arts-header-sticky-logo="primary" 
  data-arts-header-sticky-theme-text="dark" 
  data-arts-header-overlay-theme-text="light"
>
</header>

The template has two desktop variations of the menu:

# Showcase

📄 All template pages.

← Menu →