Header | Asli

Customization	Reference
Edit options in	📄 `HTML/js/app.js`
Options object	🔧 `app.options.header`
Component source	📄 `HTML/js/components/Header.js`
Component source (Gulp)	📄 `SOURCE/components/header/Header.js`

# Default Options

window.app = {
  options: {
    ...
    header: {
      sticky: {
        toggleAttributes: {
          'data-arts-header-logo': 'data-arts-header-sticky-logo',
          'data-arts-color-theme': 'data-arts-header-sticky-color-theme',
          'class': 'data-arts-header-sticky-class'
        },
        toggleReveal: true,
        toggleStickyClass: 'header__bar_sticky',
        toggleRevealingClass: false,
        toggleScrollingDownClass: 'header__bar_scrolling-down'
      },
      observeHeight: true,
      matchMediaAutoCloseOverlay: '(min-width: 992px)'
    }
  }
}

# HTML Markup

<header
  class="header header_overlay-logo-center-burger-right js-header"
  id="page-header"
  data-arts-component-name="Header"
>
  <!-- Top bar -->
  <div
    class="header__bar header__bar_fixed borders-auto-opacity-solid d-flex justify-content-between js-header__bar"
    data-arts-color-theme="dark"
    data-arts-header-logo="secondary"
    data-arts-header-sticky-logo="secondary"
    data-arts-header-sticky-class="bg-dark-3"
  >
    ...
  </div>
  <!-- - Top bar -->
  <!-- Overlay menu -->
  <div
    class="header__wrapper-overlay-menu js-header__overlay-container bg-dark-3"
    data-arts-color-theme="dark"
  >
    ...
  </div>
  <!-- - Overlay menu -->
</header>

# Customization

# 1. Disabling "sticky" effect

Set the sticky option key to false. Doing so will also disable other sticky-related effects.

header: {
  sticky: false,
  observeHeight: true,
  matchMediaAutoCloseOverlay: '(min-width: 992px)'
}

# 2. Disabling "reveal on scroll up" effect

Set the sticky.toggleReveal option key to false. This will make the header sticky all the time regardless of the scrolling direction.

header: {
  sticky: {
    toggleAttributes: {
      'data-arts-header-logo': 'data-arts-header-sticky-logo',
      'data-arts-color-theme': 'data-arts-header-sticky-color-theme',
      'class': 'data-arts-header-sticky-class'
    },
    toggleReveal: false,
    toggleStickyClass: 'header__bar_sticky',
    toggleRevealingClass: false,
    toggleScrollingDownClass: 'header__bar_scrolling-down'
  },
  observeHeight: true,
  matchMediaAutoCloseOverlay: '(min-width: 992px)'
}

# 3. Adjusting color themes and logo versions for sticky and non-sticky states

⚠️ This is a per-page adjustment and it has to be done in the page HTML markup.

<header
  class="header header_overlay-logo-center-burger-right js-header"
  id="page-header"
  data-arts-component-name="Header"
>
  <!-- Top bar -->
  <div
    class="header__bar header__bar_fixed borders-auto-opacity-solid d-flex justify-content-between js-header__bar"
    data-arts-color-theme="light"
    data-arts-header-logo="primary"
    data-arts-header-sticky-logo="primary"
    data-arts-header-sticky-class="bg-light-1"
  >
    ...
  </div>
  <!-- - Top bar -->
  <!-- Overlay menu -->
  <div
    class="header__wrapper-overlay-menu js-header__overlay-container bg-dark-3"
    data-arts-color-theme="dark"
  >
    ...
  </div>
  <!-- - Overlay menu -->
</header>

⚠️ This is a per-page adjustment and it has to be done in the page HTML markup.

<header
  class="header header_overlay-logo-center-burger-right js-header"
  id="page-header"
  data-arts-component-name="Header"
>
  <!-- Top bar -->
  <div
    class="header__bar header__bar_fixed borders-auto-opacity-solid d-flex justify-content-between js-header__bar"
    data-arts-color-theme="light"
    data-arts-header-logo="primary"
    data-arts-header-sticky-logo="primary"
    data-arts-header-sticky-class="bg-light-1"
  >
    ...
  </div>
  <!-- - Top bar -->
  <!-- Overlay menu -->
  <div
    class="header__wrapper-overlay-menu js-header__overlay-container bg-light-2"
    data-arts-color-theme="light"
  >
    ...
  </div>
  <!-- - Overlay menu -->
</header>

# 5. Absolute positioning

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

Change the header__bar_fixed class to header__bar_absolute on the top bar element.

<header
  class="header header_overlay-logo-center-burger-right js-header"
  id="page-header"
  data-arts-component-name="Header"
>
  <!-- Top bar -->
  <div
    class="header__bar header__bar_absolute borders-auto-opacity-solid d-flex justify-content-between js-header__bar"
    data-arts-color-theme="dark"
    data-arts-header-logo="secondary"
    data-arts-header-sticky-logo="secondary"
    data-arts-header-sticky-class="bg-dark-3"
  >
    ...
  </div>
  <!-- - Top bar -->
  <!-- Overlay menu -->
  <div
    class="header__wrapper-overlay-menu js-header__overlay-container bg-dark-3"
    data-arts-color-theme="dark"
  >
    ...
  </div>
  <!-- - Overlay menu -->
</header>

Disable the sticky effect in the template options

header: {
  sticky: false,
  observeHeight: true,
  matchMediaAutoCloseOverlay: '(min-width: 992px)'
}

# 6. Adjusting header dimensions

The total header height depends on the inner columns' heights. These are calculated considering the columns' paddings. The columns' paddings are fluid and their values vary based on the current screen size.

See local CSS variables on the .header element.

.header {
  --header-min-gutters-horizontal: 20;
  --header-max-gutters-horizontal: 40;
  --header-min-gutters-vertical: 10;
  --header-max-gutters-vertical: 30;
}

You can also set different gutters for the header states. For instance, you can make it less tall when sticking.

.header__bar_sticky {
  --header-min-gutters-horizontal: 20;
  --header-max-gutters-horizontal: 40;
  --header-min-gutters-vertical: 10;
  --header-max-gutters-vertical: 20;
}

# 7. Getting the actual header height in CSS

The header height value is stored in the CSS variable var(--header-height) in pixels. It's updated dynamically in JavaScript once header dimension changes are detected.

The most common usage of this variable is to offset the first page section so it doesn't intersect with the header contents (the header is positioned either fixed or absolute and doesn't push the following page elements). The template CSS has a special helper class for this case.

# Helper class to add top padding

<!-- This will add the dynamically calculated "padding-top" value -->
<div class="pt-header-height">...</div>

# Source code of the helper class

.pt-header-height {
  padding-top: var(--header-height) !important;
}

← How to Customize Smooth Scroll →

# Header