Header

Header styles may vary from page to page. Those can be defined via data- attributes right in HTML markup as described below. All the <header> attributes are being updated after each AJAX transition.

There are 2 desktop variations of the menu. You can choose between fullscreen or classic versions. On mobiles there is always a fullscreen version of menu for the sake of saving space.

Markup: Fullscreen Menu

<!-- PAGE HEADER -->
<header
  class="header header_menu-right js-header-sticky header_fixed container-fluid"
  id="page-header" 
  data-arts-theme-text="light" 
  data-arts-header-sticky-theme="bg-dark-2" 
  data-arts-header-logo="secondary" 
  data-arts-header-sticky-logo="secondary" 
  data-arts-header-overlay-theme="dark" 
  data-arts-header-overlay-background="#000"
  >
  <!-- 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">
        ...
      </div>
      <!-- - burger icon -->
      <!-- "back" button for submenu nav -->
      <div class="header__overlay-menu-back" id="js-submenu-back">
        ...
      </div>
      <!-- - "back" button for submenu nav -->
    </div>
  </div>
  <!-- - top bar -->

  <!-- fullscreen overlay container -->
  <div class="header__wrapper-overlay-menu container-fluid container-fluid_paddings">
    <!-- fullscreen menu -->
    <div class="header__wrapper-menu">
      ...
    </div>
    <!-- - fullscreen menu -->
    <!-- fullscreen widgets -->
    <div class="header__wrapper-overlay-widgets">
      ...
    </div>
    <!-- - fullscreen widgets -->
  </div>
  <!-- - fullscreen overlay container -->
</header>
<!-- - PAGE HEADER -->

Markup: Classic Menu

Note that there are 2 menus with the same items. The desktop menu is shown only on desktop screens using the combo of d-none d-lg-block classes. The column with burger button is hidden on desktop screens using d-lg-none class.

<!-- PAGE HEADER -->
<header
  class="header header_menu-right js-header-sticky header_fixed container-fluid"
  id="page-header" 
  data-arts-theme-text="light" 
  data-arts-header-sticky-theme="bg-dark-2" 
  data-arts-header-logo="secondary" 
  data-arts-header-sticky-logo="secondary" 
  data-arts-header-overlay-theme="dark" 
  data-arts-header-overlay-background="#000"
  >
  <!-- 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 -->
      <!-- desktop menu-->
      <div class="col-auto header__col d-none d-lg-block">
        ...
      </div>
      <!-- - desktop menu -->
      <!-- burger icon -->
      <div class="col-auto header__col d-lg-none">
        ...
      </div>
      <!-- - burger icon -->
      <!-- "back" button for submenu nav -->
      <div class="header__overlay-menu-back" id="js-submenu-back">
        ...
      </div>
      <!-- - "back" button for submenu nav -->
    </div>
  </div>
  <!-- - top bar -->
  
  <!-- fullscreen overlay container -->
  <div class="header__wrapper-overlay-menu container-fluid container-fluid_paddings">
    <!-- fullscreen menu -->
    <div class="header__wrapper-menu">
      ...
    </div>
    <!-- - fullscreen menu -->

    <!-- fullscreen widgets -->
    <div class="header__wrapper-overlay-widgets">
      ...
    </div>
    <!-- - fullscreen widgets -->
  </div>
  <!-- - fullscreen overlay container -->
</header>
<!-- - PAGE HEADER -->

<header> Attributes

• js-header-sticky class – defines if the header should follow the page scrolling.
• data-arts-theme-text=[dark | light] – default (non-sticky) 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-overlay-theme=[dark | light] – color theme for the opened fullscreen overlay
• data-arts-header-overlay-background=[#000 | #fff | var(--color-dark-1)] – background color of the curtain when opening a fullscreen overlay. The field accepts color HEX value or pre-defined color CSS variable.