Fullscreen

<!-- ========== HEADER ========== -->
<header id="header" class="header header-bg-transparent header-abs-top py-3">
  <div class="header-section navbar-expand">
    <div id="logoAndNav" class="container px-3">
      <!-- Nav -->
      <nav class="navbar">
        <!-- Logo -->
        <a class="navbar-brand" href="#" aria-label="Front">
          <img src="../../assets/svg/logos/logo.svg" alt="Logo">
        </a>
        <!-- End Logo -->

        <!-- Fullscreen Toggle Button -->
        <button id="headerToggler" type="button" class="navbar-toggler fullscreen-toggler btn btn-icon btn-sm btn-soft-secondary rounded-circle"
                aria-label="Toggle navigation"
                aria-expanded="false"
                data-toggle="button"
                aria-controls="headerFullscreen"
                data-target="#headerFullscreen">
          <span class="navbar-toggler-default">
            <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
              <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
            </svg>
          </span>
          <span class="navbar-toggler-toggled">
            <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
              <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
            </svg>
          </span>
        </button>
        <!-- End Fullscreen Toggle Button -->
      </nav>
      <!-- End Nav -->

      <!-- Navigation -->
      <div id="headerFullscreen" class="fullscreen"
           data-hs-header-fullscreen-options='{
             "overlayClass": "fullscreen-overlay"
           }'
           aria-labelledby="headerToggler">
        <div class="fullscreen-container">
          <div class="container">
            <div class="fullscreen-body">
              <div class="row justify-content-md-between align-items-center">
                <div id="fullscreenWrapper" class="col-md-6">
                  <!-- List -->
                  <ul id="fullscreenNav" class="fullscreen-nav">
                    <!-- Home Section -->
                    <li class="u-has-submenu fullscreen-submenu">
                      <a class="fullscreen-nav-link" href="#homeCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeCollapse">
                        Home
                      </a>

                      <ul id="homeCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                        <!-- Home - Classic -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" href="#homeClassicSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeClassicSubNavCollapse">
                            Classic
                          </a>

                          <ul id="homeClassicSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Agency</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Analytics</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Studio</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Marketing</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Advertisement</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Consulting</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Portfolio</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Software</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Business</a></li>
                          </ul>
                        </li>
                        <!-- End Home - Classic -->

                        <!-- Home - App -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" href="#homeAppSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeAppSubNavCollapse">
                            App
                          </a>

                          <ul id="homeAppSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-kit.html">UI Kit</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">App SaaS</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">App Workflow</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">App Payment</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">App Tool</a></li>
                          </ul>
                        </li>
                        <!-- End Home - App -->

                        <!-- Home - Onepages -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" href="#homeOnepagesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeOnepagesSubNavCollapse">
                            Onepages
                          </a>

                          <ul id="homeOnepagesSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Corporate</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">SaaS</a></li>
                          </ul>
                        </li>
                        <!-- End Home - Onepages -->
                      </ul>
                    </li>
                    <!-- End Home Section -->

                    <!-- Page Section -->
                    <li class="u-has-submenu fullscreen-submenu">
                      <a class="fullscreen-nav-link" href="#pagesCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCollapse">
                        Pages
                      </a>

                      <ul id="pagesCollapse" class="collapse fullscreen-nav-list"
                          data-parent="#fullscreenWrapper">
                        <!-- Page - Company -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesCompanyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCompanyCollapse">
                            Company
                          </a>

                          <ul id="pagesCompanyCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">About Agency</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Services Agency</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Customers</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Customer story</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Careers</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Careers Single</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Hire Us</a></li>
                          </ul>
                        </li>
                        <!-- End Page - Company -->

                        <!-- Page - Portfolio -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesPortfolioCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesPortfolioCollapse">
                            Portfolio
                          </a>

                          <ul id="pagesPortfolioCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Grid</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Masonry</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Modern</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-branding.html">Case Studies Branding</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-product.html">Case Studies Product</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-list.html">Single Page List</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-grid.html">Single Page Grid</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-masonry.html">Single Page Masonry</a></li>
                          </ul>
                        </li>
                        <!-- End Page - Portfolio -->

                        <!-- Page - Login -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesLoginCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesLoginCollapse">
                            Login
                          </a>

                          <ul id="pagesLoginCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Login</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Signup</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Recover Account</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Login Simple</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Signup Simple</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-simple.html">Recover Account Simple</a></li>
                          </ul>
                        </li>
                        <!-- End Page - Login -->

                        <!-- Page - Contacts -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesContactsCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesContactsCollapse">
                            Contacts
                          </a>

                          <ul id="pagesContactsCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Contacts Agency</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-up.html">Contacts Start-Up</a></li>
                          </ul>
                        </li>
                        <!-- End Page - Contacts -->

                        <!-- Page - Utilities -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesUtilitiesCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesUtilitiesCollapse">
                            Utilities
                          </a>

                          <ul id="pagesUtilitiesCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Pricing</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">FAQ</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Terms & Conditions</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Privacy & Policy</a></li>
                          </ul>
                        </li>
                        <!-- End Page - Utilities -->

                        <!-- Page - Specialty -->
                        <li class="u-has-submenu fullscreen-submenu">
                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesSpecialtyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesSpecialtyCollapse">
                            Specialty
                          </a>

                          <ul id="pagesSpecialtyCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Cover Page</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Coming Soon</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Maintenance Mode</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Status</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Invoice</a></li>
                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Error 404</a></li>
                          </ul>
                        </li>
                        <!-- End Page - Specialty -->
                      </ul>
                    </li>
                    <!-- End Page Section -->

                    <!-- Blog -->
                    <li class="u-has-submenu fullscreen-submenu">
                      <a class="fullscreen-nav-link" href="#blogCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="blogCollapse">
                        Blog
                      </a>

                      <ul id="blogCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Journal</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Metro</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Newsroom</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Blog Profile</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Article</a></li>
                      </ul>
                    </li>
                    <!-- End Blog -->

                    <!-- Shop Section -->
                    <li class="u-has-submenu fullscreen-submenu">
                      <a class="fullscreen-nav-link" href="#shopCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="shopCollapse">
                        Shop
                      </a>

                      <ul id="shopCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Classic</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Categories</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Categories Sidebar</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Products Grid</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Products List</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Product</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Empty Cart</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Cart</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Checkout</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Order Completed</a></li>
                      </ul>
                    </li>
                    <!-- End Shop Section -->

                    <!-- Demos -->
                    <li class="u-has-submenu fullscreen-submenu">
                      <a class="fullscreen-nav-link" href="#demosCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="demosCollapse">
                        Demos
                      </a>

                      <ul id="demosCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Course</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">App Marketplace</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Help Desk</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">Account</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">Job</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">House</a></li>
                      </ul>
                    </li>
                    <!-- End Demos -->

                    <!-- Docs Section -->
                    <li class="u-has-submenu fullscreen-submenu">
                      <a class="fullscreen-nav-link" href="#docsCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="docsCollapse">
                        Docs
                      </a>

                      <ul id="docsCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Documentation</a></li>
                        <li><a class="nav-link fullscreen-submenu-list-link disabled" href="../../snippets/index.html">Snippets</a></li>
                      </ul>
                    </li>
                    <!-- End Docs Section -->
                  </ul>
                  <!-- End List -->
                </div>

                <div class="col-md-4 d-none d-md-inline-block">
                  <!-- Address -->
                  <div class="mb-7">
                    <span class="d-block text-white font-weight-bold mb-3">Address</span>

                    <address class="mb-0">
                      <span class="d-block text-white-70 mb-1">+1 (062) 109-9222</span>
                      <span class="d-block text-white-70 mb-1">hello@example.com</span>
                      <span class="d-block text-white-70 mb-1">153 Williamson Plaza, Maggieberg, MT 09514</span>
                    </address>
                  </div>
                  <!-- End Address -->

                  <!-- Social Networks -->
                  <span class="d-block text-white font-weight-bold mb-3">Social</span>

                  <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                      <a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
                        <i class="fab fa-facebook-f"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
                        <i class="fab fa-google"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
                        <i class="fab fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
                        <i class="fab fa-github"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Social Networks -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Navigation -->
    </div>
  </div>
</header>
<!-- ========== END HEADER ========== -->
Copy
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/all.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-header-fullscreen/dist/hs-header-fullscreen.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of header fullscreen
    var headerFullscreen = new HSHeaderFullscreen($('#headerFullscreen')).init();

    $(document).on('keydown', function (e) {
      if (e.keyCode && e.keyCode === 27) {
        $('[aria-pressed]').attr('aria-pressed', false).removeClass('active focus');
        $('#fullscreenNav .collapse').collapse('hide');
      }
    });
  });
</script>
Copy