# Fullscreen Navbar

- HTML
- JS

                    <!-- ========== HEADER ========== -->
                    <header id="header" class="navbar navbar-expand navbar-dark navbar-fullscreen">
                      <nav class="container">
                        <!-- Default Logo -->
                        <a class="navbar-brand" href="../index.html" aria-label="Front">
                          <img class="navbar-brand-logo" src="../assets/svg/logos/logo-white.svg" alt="Logo">
                        </a>
                        <!-- End Default Logo -->

                        <!-- Toggler -->
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarFullscreenNav" aria-controls="navbarFullscreenNav" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-default">
                            <i class="bi-list"></i>
                          </span>
                          <span class="navbar-toggler-toggled">
                            <i class="bi-x"></i>
                          </span>
                        </button>
                        <!-- End Toggler -->

                        <!-- Collapse -->
                        <div class="collapse navbar-collapse" id="navbarFullscreenNav">
                          <div class="container">
                            <div class="navbar-fullscreen-scroller">
                              <div class="row justify-content-md-between align-items-md-center">
                                <div class="col-md-6">
                                  <!-- Collapse -->
                                  <ul class="navbar-nav" id="navbarNavCollapse">
                                    <!-- Landings -->
                                    <li class="nav-item">
                                      <a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsCollapse" aria-expanded="false" aria-controls="landingsCollapse">Landings</a>

                                      <div id="landingsCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
                                        <div id="landingsNavCollapse">
                                          <!-- Classic -->
                                          <div class="nav-item">
                                            <a class="dropdown-item collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsClassicCollapse" aria-expanded="false" aria-controls="landingsClassicCollapse">Classic</a>

                                            <div id="landingsClassicCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
                                              <a class="dropdown-item" href="#">Corporate</a>
                                              <a class="dropdown-item" href="#">Analytics <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
                                              <a class="dropdown-item" href="#">Studio</a>
                                              <a class="dropdown-item" href="#">Marketing</a>
                                              <a class="dropdown-item" href="#">Advertisement</a>
                                              <a class="dropdown-item" href="#">Consulting</a>
                                              <a class="dropdown-item" href="#">Portfolio</a>
                                              <a class="dropdown-item" href="#">Software</a>
                                              <a class="dropdown-item" href="#">Business</a>
                                            </div>
                                          </div>
                                          <!-- End Classic -->

                                          <!-- App -->
                                          <div class="nav-item">
                                            <a class="dropdown-item collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsAppCollapse" aria-expanded="false" aria-controls="landingsAppCollapse">App</a>

                                            <div id="landingsAppCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
                                              <a class="dropdown-item" href="#">UI Kit</a>
                                              <a class="dropdown-item" href="#">SaaS</a>
                                              <a class="dropdown-item" href="#">Workflow</a>
                                              <a class="dropdown-item" href="#">Payment</a>
                                              <a class="dropdown-item" href="#">Tool</a>
                                            </div>
                                          </div>
                                          <!-- End App -->

                                          <!-- Onepage -->
                                          <div class="nav-item">
                                            <a class="dropdown-item collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsOnepageCollapse" aria-expanded="false" aria-controls="landingsOnepageCollapse">Onepage</a>

                                            <div id="landingsOnepageCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
                                              <a class="dropdown-item" href="#">Corporate</a>
                                              <a class="dropdown-item" href="#">SaaS <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
                                            </div>
                                          </div>
                                          <!-- End Onepage -->
                                        </div>
                                      </div>
                                    </li>
                                    <!-- End Landings -->

                                    <!-- Company -->
                                    <li class="nav-item">
                                      <a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#companyCollapse" aria-expanded="false" aria-controls="companyCollapse">Company</a>

                                      <div id="companyCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
                                        <a class="dropdown-item" href="#">About</a>
                                        <a class="dropdown-item" href="#">Services</a>
                                        <a class="dropdown-item" href="#">Customer Stories</a>
                                        <a class="dropdown-item" href="#">Customer Story</a>
                                        <a class="dropdown-item" href="#">Careers</a>
                                        <a class="dropdown-item" href="#">Careers Overview</a>
                                        <a class="dropdown-item" href="#">Hire Us</a>
                                        <a class="dropdown-item" href="#">Pricing</a>
                                        <a class="dropdown-item" href="#">Contacts: Agency</a>
                                        <a class="dropdown-item" href="#">Contacts: Startup</a>
                                      </div>
                                    </li>
                                    <!-- End Company -->

                                    <!-- Account -->
                                    <li class="nav-item">
                                      <a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#accountCollapse" aria-expanded="false" aria-controls="accountCollapse">Account</a>

                                      <div id="accountCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
                                        <!-- Authentication -->
                                        <div class="nav-item">
                                          <a class="dropdown-item collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#authenticationCollapse" aria-expanded="false" aria-controls="authenticationCollapse">
                                            Authentication
                                          </a>

                                          <div id="authenticationCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#accountCollapse">
                                            <a class="dropdown-item" href="#">Login</a>
                                            <a class="dropdown-item" href="#">Signup</a>
                                            <a class="dropdown-item" href="#">Reset Password</a>
                                            <a class="dropdown-item" href="#">Login Simple</a>
                                            <a class="dropdown-item" href="#">Signup Simple</a>
                                            <a class="dropdown-item" href="#">Reset Password Simple</a>
                                          </div>
                                        </div>
                                        <!-- End Authentication -->

                                        <a class="dropdown-item" href="#">Personal info</a>
                                        <a class="dropdown-item" href="#">Login & Security</a>
                                        <a class="dropdown-item" href="#">Notifications</a>
                                        <a class="dropdown-item" href="#">Preferences</a>
                                        <a class="dropdown-item" href="#">Orders</a>
                                        <a class="dropdown-item" href="#">Wishlist</a>
                                        <a class="dropdown-item" href="#">Plans & Payment</a>
                                        <a class="dropdown-item" href="#">Address</a>
                                        <a class="dropdown-item" href="#">Teams</a>
                                      </div>
                                    </li>
                                    <!-- End Account -->

                                    <!-- Pages -->
                                    <li class="nav-item">
                                      <a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#pagesCollapse" aria-expanded="false" aria-controls="pagesCollapse">
                                        Pages
                                      </a>

                                      <div id="pagesCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
                                        <div id="pagesNavCollapse">
                                          <a class="dropdown-item" href="#">FAQ</a>
                                          <a class="dropdown-item" href="#">Terms & Conditions</a>
                                          <a class="dropdown-item" href="#">Privacy & Policy</a>
                                          <a class="dropdown-item" href="#">Coming Soon</a>
                                          <a class="dropdown-item" href="#">Maintenance Mode</a>
                                          <a class="dropdown-item" href="#">Status</a>
                                          <a class="dropdown-item" href="#">Invoice</a>
                                          <a class="dropdown-item" href="#">Error 404</a>
                                        </div>
                                      </div>
                                    </li>
                                    <!-- End Pages -->

                                    <!-- Blog -->
                                    <li class="nav-item">
                                      <a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#blogCollapse" aria-expanded="false" aria-controls="blogCollapse">Blog</a>

                                      <div id="blogCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
                                        <a class="dropdown-item" href="#">Journal</a>
                                        <a class="dropdown-item" href="#">Metro</a>
                                        <a class="dropdown-item" href="#">Newsroom</a>
                                        <a class="dropdown-item" href="#">Article</a>
                                        <a class="dropdown-item" href="#">Author Profile</a>
                                      </div>
                                    </li>
                                    <!-- End Blog -->

                                    <!-- Portfolio -->
                                    <li class="nav-item">
                                      <a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#portfolioCollapse" aria-expanded="false" aria-controls="portfolioCollapse">Portfolio</a>

                                      <div id="portfolioCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
                                        <a class="dropdown-item" href="#">Grid</a>
                                        <a class="dropdown-item" href="#">Product Article</a>
                                        <a class="dropdown-item" href="#">Case Studies: Branding</a>
                                        <a class="dropdown-item" href="#">Case Studies: Product</a>
                                      </div>
                                    </li>
                                    <!-- End Portfolio -->

                                    <!-- Demos -->
                                    <li class="nav-item">
                                      <a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#demosCollapse" aria-expanded="false" aria-controls="demosCollapse">Demos</a>

                                      <div id="demosCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
                                        <a class="dropdown-item" href="#">Main</a>
                                        <a class="dropdown-item" href="#">Real Estate</a>
                                        <a class="dropdown-item" href="#">Jobs</a>
                                        <a class="dropdown-item" href="#">Course</a>
                                        <a class="dropdown-item" href="#">E-commerce</a>
                                        <a class="dropdown-item" href="#">App Marketplace</a>
                                        <a class="dropdown-item" href="#">Help Desk</a>
                                      </div>
                                    </li>
                                    <!-- End Demos -->

                                    <!-- Docs -->
                                    <li class="nav-item">
                                      <a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#docsCollapse" aria-expanded="false" aria-controls="docsCollapse">Docs</a>

                                      <div id="docsCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
                                        <a class="dropdown-item" href="#">Documentation</a>
                                        <a class="dropdown-item" href="#">Snippets</a>
                                      </div>
                                    </li>
                                    <!-- End Docs -->
                                  </ul>
                                  <!-- End Collapse -->
                                </div>
                                <!-- End Col -->

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

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

                                  <!-- Socials -->
                                  <span class="text-cap text-white">Social</span>

                                  <ul class="list-inline mb-0">
                                    <li class="list-inline-item">
                                      <a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
                                        <i class="bi-facebook"></i>
                                      </a>
                                    </li>

                                    <li class="list-inline-item">
                                      <a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
                                        <i class="bi-google"></i>
                                      </a>
                                    </li>

                                    <li class="list-inline-item">
                                      <a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
                                        <i class="bi-twitter"></i>
                                      </a>
                                    </li>

                                    <li class="list-inline-item">
                                      <a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
                                        <i class="bi-github"></i>
                                      </a>
                                    </li>
                                  </ul>
                                  <!-- End Socials -->
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                        </div>
                        <!-- End Collapse -->
                      </nav>
                    </header>
                    <!-- ========== END HEADER ========== -->

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF HEADER
                        // =======================================================
                        new HSHeader('#header').init()

                        document.addEventListener('keydown', e => {
                          if (e.keyCode && e.keyCode === 27) {
                            const $header = document.querySelector('#navbarFullscreenNav')
                            if (!$header.classList.contains('show')) return
                            new bootstrap.Collapse($header).hide()
                          }
                        })
                      })()
                    </script>