Header Fullscreen

Catches your visitors' attention with a nice edge-to-edge screen header, no matter what is the screen width and height.

How to use?

Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.

<script src="../../assets/vendor/hs-header-fullscreen/dist/hs-header-fullscreen.min.js"></script>
Copy

Copy-paste the init functions under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of header fullscreen
    var headerFullscreen = new HSHeaderFullscreen($('#headerFullscreen')).init();
  });
</script>
Copy

Example

Basic

Navbar includes the following basic classes:

  • .fullscreen for positioning the navbar full width and height.
  • .fullscreen-showed (active class) to open/close navbar.
  • .fullscreen-container for a full-screen content.
  • .fullscreen-overlay for use with background overlay color.

Here's an example of all the sub-components included in a responsive header fullscreen.

Close button

Fullscreen navbars can be closed with close hamburger button and also ESC keyboard. However, the examples do not include the close button, due to positioning (extra stylesheet). An example with a close hamburger can be seen in the following page: Header Fullscreen

Navbar navigation links build on our .fullscreen-submenu options with their own modifier class. Navigation in navbars will also grow to occupy as much vertical space as possible to keep your navbar contents securely aligned.

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

<!-- 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="#">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 Software</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 - Account -->
                  <li class="u-has-submenu fullscreen-submenu">
                    <a class="fullscreen-submenu-nav-link" role="button" href="#pagesAccountCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesAccountCollapse">
                      Account
                    </a>

                    <ul id="pagesAccountCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Dashboard</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Profile</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">My tasks</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Projects</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Members</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Edit profile</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Change password</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Notifications</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Activity</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Payment methods</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Invite friends</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Plans</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">API Token</a></li>
                    </ul>
                  </li>
                  <!-- End Page - Account -->

                  <!-- 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="#">Case Studies Branding</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Case Studies Product</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Page List</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Page Grid</a></li>
                      <li><a class="nav-link fullscreen-submenu-list-link" href="#">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="#">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="#">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.html">Journal</a></li>
                  <li><a class="nav-link fullscreen-submenu-list-link" href="metro.html">Metro</a></li>
                  <li><a class="nav-link fullscreen-submenu-list-link" href="newsroom.html">Newsroom</a></li>
                  <li><a class="nav-link fullscreen-submenu-list-link" href="blog-profile.html">Blog Profile</a></li>
                  <li><a class="nav-link fullscreen-submenu-list-link" href="single-article.html">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="#">Education</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" href="#">Job</a></li>
                  <li><a class="nav-link fullscreen-submenu-list-link" href="#">House</a></li>
                  <li><a class="nav-link fullscreen-submenu-list-link" href="#">Crypto landing</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" href="#">Get started</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 -->
Copy

Placement

Use our header position utilities to place navbars in various positions.

SCSS

SCSS-files of the component can be found here assets/scss/front/headers/

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of header fullscreen
    var headerFullscreen = new HSHeaderFullscreen($('#headerFullscreen'), {
      afterOpen: function() {
        alert('afterOpen callback done!');
      },
      afterClose: function() {
        alert('afterClose callback done!');
      }
    }).init();
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-header-fullscreen-options='{
   ...
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-header-fullscreen-options='{}'.

Parameters Description Default value

overlayClass

 Overlay class 'fullscreen-overlay'

afterOpen

 Executes code inside the function body every time after opening -

afterClose

 Executes code inside the function body every time after closing -