<nav class="navbar  fixed-top navbar-dark bg-dark" aria-label="Main navigation">
  <div class="backdrop"></div>
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <!-- <img src="assets/img/Signal-Logo-white.png"> -->
      Logo Here

    </a>
    <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
       <button class="btn btn-light closeBtn" id="close">X</button>
      <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Company</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu list-inline" aria-labelledby="dropdown01">
            <li class="list-inline-item"><a class="dropdown-item " href="#">Service 1</a></li>
            <li class="list-inline-item"><a class="dropdown-item" href="#">Service 2</a></li>
            <li class="list-inline-item"><a class="dropdown-item" href="#">Service 3</a></li>
          </ul>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
          <ul class="sub-menu list-inline" aria-labelledby="dropdown01">
            <li class="list-inline-item"><a class="" href="#">Service 1</a></li>
            <li class="list-inline-item"><a class="" href="#">Service 2</a></li>
            <li class="list-inline-item"><a class="" href="#">Service 3</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- ===================================== -->
<!-- ===================================== -->
<!-- ===================================== -->
<!-- =======     Basic Hero    =========== -->
<!-- ===================================== -->
<!-- ===================================== -->
<!-- ===================================== -->

<section class="hero">
  <div class="container">
    <div class="row">
      <div class="col-md-10 offset-md-1 my-auto text-center">
        <h1 class="headingLg white uc" data-aos="fade-right" data-aos-delay="400">Lorem ipsum dolor sit&nbsp;amet</h1>
        <h2 class="headingSm white uc" data-aos="fade-right" data-aos-delay="400">Lorem ipsum dolor sit&nbsp;amet</h2>
      </div>
    </div><!-- close row -->
  </div><!-- close container  -->
</section>

html,
body {
  margin: 0;
}

body {
  padding-top: 56px;
}

.offcanvas-collapse {
  position: fixed;
  top: 56px; /* Height of navbar */
  bottom: 0;
  left: 100%;
  width: 70%;
  padding-right: 1rem;
  padding-left: 1rem;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  transition: transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.bg-purple {
  background-color: #6f42c1;
}

.navbar-brand img {
  width: 150px;
}

.nav-item {
}

.nav-item {
  font-size: 52px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 55px;
  opacity: 1;
  transition: transform 0.9s ease-in-out, visibility 0.9s ease-in-out;

  margin-top: 20px;
}

.nav-item .sub-menu {
  font-size: 20px;
  font-weight: 300;
  color: #fff;
}
.nav-item .sub-menu a {
  color: #fff;
  text-decoration: none;
}

.offcanvas-collapse {
  position: fixed;
  top: 56px; /* Height of navbar */
  bottom: 0;
  left: 0;
  width: 70%;
  padding-right: 1rem;
  padding-left: 1rem;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
  transition-delay: 1s;
}
.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(0%);
  transition-delay: 0s;
}
#navbarsExampleDefault > ul > li {
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.offcanvas-collapse.open#navbarsExampleDefault > ul > li {
  transform: translateX(0%);
  transition-delay: 0s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(1) {
  transition-delay: 0.1s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(2) {
  transition-delay: 0.2s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(3) {
  transition-delay: 0.3s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(4) {
  transition-delay: 0.4s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(5) {
  transition-delay: 0.5s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(6) {
  transition-delay: 0.6s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(7) {
  transition-delay: 0.7s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(8) {
  transition-delay: 0.8s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(9) {
  transition-delay: 0.9s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(10) {
  transition-delay: 1s;
}

.offcanvas-collapse.open#navbarsExampleDefault > ul > li {
  transform: translateX(0%);
}
#navbarsExampleDefault > ul > li:nth-child(1) {
  transition-delay: 0.9s;
}
#navbarsExampleDefault > ul > li:nth-child(2) {
  transition-delay: 0.8s;
}
#navbarsExampleDefault > ul > li:nth-child(3) {
  transition-delay: 0.7s;
}
#navbarsExampleDefault > ul > li:nth-child(4) {
  transition-delay: 0.6s;
}
#navbarsExampleDefault > ul > li:nth-child(5) {
  transition-delay: 0.5s;
}
#navbarsExampleDefault > ul > li:nth-child(6) {
  transition-delay: 0.4s;
}
#navbarsExampleDefault > ul > li:nth-child(7) {
  transition-delay: 0.3s;
}
#navbarsExampleDefault > ul > li:nth-child(8) {
  transition-delay: 0.2s;
}
#navbarsExampleDefault > ul > li:nth-child(9) {
  transition-delay: 0.1s;
}
#navbarsExampleDefault > ul > li:nth-child(10) {
  transition-delay: 0s;
}

#navbarsExampleDefault {
  z-index: 1030;
}
.backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: 0.5s ease;
  pointer-events: none;
  z-index: -1;
}
.open .backdrop {
  background: rgba(0, 0, 0, 0.3);
  z-index: 1029;
  pointer-events: initial;
}
 #close{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index:3;
 }

.hero {
  /*height: 600px;*/
  background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.5) 46%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    url("assets/img/placeholder-hero.jpg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
}
.hero,.hero .container,.hero .row{
    min-height:calc(100vh - 56px);
}

(function () {
  "use strict";
  const nav = document.querySelector("#navbarSideCollapse");
  const backdrop = document.querySelector(".backdrop");
  const body = document.querySelector("body");
  const hamburger = document.querySelector(".offcanvas-collapse");
  const closeBtn = document.querySelector("#close");

  [closeBtn, nav, backdrop].forEach((item) => {
    item.addEventListener("click", (event) => {
      event.preventDefault();
      openCloseAll();
    });
  });
  function openCloseAll() {
    hamburger.classList.toggle("open");
    body.classList.toggle("open");
  }
})();


//Note:

  /* All code below was replaced by [closeBtn, nav, backdrop] etc.. function instead.
  
  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    openCloseAll();
  });

  nav.addEventListener("click", function (e) {
    e.preventDefault();
    openCloseAll();
  });

  backdrop.addEventListener("click", function (e) {
      openCoseAll();
  });
  */