Menu

Fullscreen Overlay

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>
  <!-- - top bar -->

  <!-- fullscreen overlay container -->
  <div class="header__wrapper-overlay-menu" data-arts-theme-text="light">
    <div class="mask-reveal w-100 h-100">
      <div class="mask-reveal__layer mask-reveal__layer-1 bg-dark-1">
        <div class="mask-reveal__layer mask-reveal__layer-2">
          <div class="row align-items-center h-100">
            <!-- menu & bottom widgets -->
            <div class="header__menu-column col-lg-7 order-lg-2 h-100 d-flex flex-column bg-dark-2 position-relative">
              <!-- top gradient -->
              <div class="header__menu-gradient header__menu-gradient_top"></div>
              <!-- - top gradient -->
              <!-- virtual scrolling container -->
              <div class="header__scroll-container js-header-smooth-scroll-container overflow pointer-events-auto">
                <div class="header__wrapper-menu">
                  <ul class="menu-overlay js-menu-overlay">
                    ...
                  </ul>
                </div>
              </div>
              <!-- - virtual scrolling container -->
              <!-- bottom gradient -->
              <div class="header__menu-gradient header__menu-gradient_bottom"></div>
              <!-- - bottom gradient -->
            </div>
            <!-- - menu & bottom widgets -->
            <!-- featured projects slider -->
            <div class="col-lg-5 order-lg-1 h-100 d-none d-lg-flex flex-column bg-dark-1 position-relative">
              ...
            </div>
            <!-- - featured projects slider -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- - fullscreen overlay container -->
</header>

Showcase

All template pages, except:

• 📄 050-classic-menu-right.html
• 📄 051-classic-menu-center.html
• 📄 052-classic-menu-split-center.html

Classic

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">
    <!-- 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">
      <ul class="menu js-menu">
        ...
      </ul>
    </div>
    <!-- - desktop menu -->
  </div>
  <!-- - top bar -->

  <!-- fullscreen overlay container -->
  <div class="header__wrapper-overlay-menu" data-arts-theme-text="light">
    <div class="mask-reveal w-100 h-100">
      <div class="mask-reveal__layer mask-reveal__layer-1 bg-dark-1">
        <div class="mask-reveal__layer mask-reveal__layer-2">
          <div class="row align-items-center h-100">
            <!-- menu & bottom widgets -->
            <div class="header__menu-column col-lg-7 order-lg-2 h-100 d-flex flex-column bg-dark-2 position-relative">
              <!-- top gradient -->
              <div class="header__menu-gradient header__menu-gradient_top"></div>
              <!-- - top gradient -->
              <!-- virtual scrolling container -->
              <div class="header__scroll-container js-header-smooth-scroll-container overflow pointer-events-auto">
                <div class="header__wrapper-menu">
                  <ul class="menu-overlay js-menu-overlay">
                    ...
                  </ul>
                </div>
              </div>
              <!-- - virtual scrolling container -->
              <!-- bottom gradient -->
              <div class="header__menu-gradient header__menu-gradient_bottom"></div>
              <!-- - bottom gradient -->
            </div>
            <!-- - menu & bottom widgets -->
            <!-- featured projects slider -->
            <div class="col-lg-5 order-lg-1 h-100 d-none d-lg-flex flex-column bg-dark-1 position-relative">
              ...
            </div>
            <!-- - featured projects slider -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- - fullscreen overlay container -->
</header>

• Note that there are 2 menus with the same items. The desktop menu is shown only on desktop screens using the combination of d-none d-lg-block classes. The column with the burger button is hidden on desktop screens using the d-lg-none class.
• On mobiles, there is always a fullscreen version of the menu to save space.

Classes

• .header_menu-left – class applied on <header> element sets the submenus to open to the right side. Example page: #051.
• .header_menu-right – class applied on <header> element sets the submenus to open to the left side. Example page: #050.
• .header_menu-split-center – class applied on <header> element sets the submenus from the left menu to open to the right side and the submenus from the right menu to open to the left side. Example page: #052.

Showcase

• 📄 050-classic-menu-right.html
• 📄 051-classic-menu-center.html
• 📄 052-classic-menu-split-center.html