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 Front to enable them.

            
              <script src="../../assets/js/helpers/hs.header-fullscreen.js"></script>
              <script src="../../assets/js/components/hs.hamburgers.js"></script>

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

            
              <script>
                $(document).on('ready', function () {
                  // initialization of fullscreen header
                  $.HSCore.components.HSHeaderFullscreen.init($('#fullscreen'));
                  $.HSCore.components.HSHamburgers.init('#hamburgerTrigger');
                });
              </script>

Example

Basic

Navbar includes the following basic classes:

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

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

Navbar navigation links build on our .u-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.

                  
                    <!-- Hamburger trigger -->
                    <button id="navFullscreenToggler" class="navbar-toggler d-block btn u-hamburger u-fullscreen--toggler"
                            aria-haspopup="true"
                            aria-expanded="false"
                            aria-controls="navFullscreen"
                            aria-label="Toggle Header"
                            data-target="#navFullscreen">
                      <span id="hamburgerTriggerWithNav" class="u-hamburger__box">
                        <span class="u-hamburger__inner"></span>
                      </span>
                    </button>
                    <!-- End Hamburger trigger -->

                    <!-- Fullscreen navbar -->
                    <div id="navFullscreen" class="u-fullscreen"
                         aria-labelledby="navFullscreenToggler"
                         data-overlay-classes="u-fullscreen__overlay">
                      <div class="u-fullscreen__container">
                        <div class="container">
                          <div class="row justify-content-md-between align-items-center">
                            <div class="col-md-6">
                              <!-- List -->
                              <ul id="fullscreenNavOnly" class="u-fullscreen__nav">
                                <!-- Home Section -->
                                <li class="u-fullscreen__submenu">
                                  <a class="u-fullscreen__nav-link" href="#">
                                    Home
                                  </a>
                                </li>
                                <!-- End Home Section -->

                                <!-- Pages Section -->
                                <li class="u-fullscreen__submenu">
                                  <a class="u-fullscreen__nav-link" href="#">
                                    Pages
                                  </a>
                                </li>
                                <!-- End Pages Section -->

                                <!-- Works Section -->
                                <li class="u-fullscreen__submenu">
                                  <a class="u-fullscreen__nav-link" href="#">
                                    Works
                                  </a>
                                </li>
                                <!-- End Works Section -->

                                <!-- Starter Section -->
                                <li class="u-fullscreen__submenu">
                                  <a class="u-fullscreen__nav-link" href="#">
                                    Starter
                                  </a>
                                </li>
                                <!-- End Starter Section -->
                              </ul>
                              <!-- End List -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Fullscreen navbar -->

Placement

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

JavaScript behavior

Callbacks 

            
              afterOpen: function (invoker) {} - function
              afterClose: function (invoker) {} - function

Methods

List of available JavaScript functions.

JS functions Description

overlayClass

 overlay color of the navbar

sectionsContainerSelector

 Specifies the container selector.

afterOpen: function (invoker) {}

 Executes the code inside the body of the function each time after opening.

afterClose: function (invoker) {}

 Executes the code inside the body of the function each time after closing.