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.

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: Blog business

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

Subnav

The default white colors of the .u-fullscreen__submenu-list-link or their immediate parent .u-fullscreen__submenu-nav-link can be modified via assets/include/scss/base/headers/_header-fullscreen-style.scss

                      
                        <a class="u-fullscreen__submenu-nav-link" href="#SubNavHomeExampleSubNavCollapse" role="button"
                           data-toggle="collapse"
                           aria-expanded="false"
                           aria-controls="SubNavHomeExampleSubNavCollapse">
                          Example
                        </a>

                        <ul id="SubNavHomeExampleSubNavCollapse" class="collapse u-fullscreen__submenu-list"
                            data-parent="#subNavFullscreenNav">
                          <li><a class="nav-link u-fullscreen__submenu-list-link py-2 px-0" href="#">Example Agency</a></li>
                          <li><a class="nav-link u-fullscreen__submenu-list-link py-2 px-0" href="#">Example Crypto</a></li>
                          <li><a class="nav-link u-fullscreen__submenu-list-link py-2 px-0" href="#">Example Business</a></li>
                          <li><a class="nav-link u-fullscreen__submenu-list-link py-2 px-0" href="#">Example Marketing</a></li>
                          <li><a class="nav-link u-fullscreen__submenu-list-link py-2 px-0" href="#">Example Consulting</a></li>
                        </ul>

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.
Previous Header mega menu
Next Header searches
Contact Us