0

I use bootstrap 5 navbar and I want to make it sticky from it's container #main-nav. also I check for what making my code occur but I didn't use somthing like overflow or set height in parent. can someone tell whats wrong in my code?

#main-nav{
    transition: all .4s ease;
    background: var(--white);
}
.main-nav--sticky {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 3px 3px 7px rgb(0 0 0 / 5%);
}
#main-nav .nav-item {
    position: relative;
    cursor: pointer;
}

#main-nav .nav-link {
    color: var(--link-color);
    user-select: none;
}

#main-nav .nav-link:hover,
#main-nav .current-menu-item .nav-link {
    color: var(--hover-color);
}

#main-nav .menu-item-has-children .sub-menu {
    display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
    <header>
      <!------------------ main-nav start------------------>
      <div id="main-nav" class="main-nav--sticky">
        <nav class="navbar navbar-expand-lg py-lg-0 py-2">
          <div class="container p-0">
            <a class="navbar-brand d-flex justify-content-center align-items-center py-0" href="#">
              <img src="" alt="">
            </a>
            <button class="navbar-toggler m-3" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon">
                <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
                  <path stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' />
                </svg>
              </span>
            </button>
            <div class="collapse navbar-collapse mt-lg-0 mt-3 ms-lg-5" id="main-menu">
              <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item current-menu-item">
                  <a class="nav-link mx-lg-3 p-lg-0 px-lg-0 px-3" href="#">Home</a>
                </li>
                <li class="nav-item menu-item-has-children">
                  <a class="nav-link mx-lg-3 p-lg-0 px-lg-0 px-3" href="#">Products</a>
                  <ul class="sub-menu">
                    <li class="nav-item">
                      <a class="nav-link mx-lg-3 p-lg-0 px-lg-0 px-3" href="#">Grilles & Diffusers</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link mx-lg-3 p-lg-0 px-lg-0 px-3" href="#">Heat Pump Accessories</a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
                  <a class="nav-link mx-lg-3 p-lg-0 px-lg-0 px-3" href="#">Downloads</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mx-lg-3 p-lg-0 px-lg-0 px-3" href="#">About Us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mx-lg-3 p-lg-0 px-lg-0 px-3" href="#">Contact Us</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
      <!------------------ main-nav end------------------>
    </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

I use this code similarly before in some sites and it works but I don't know what's wrong in this.

Alipvd
  • 71
  • 7
  • 1
    Either put the `sticky` onto the `header`, or add `display: unset` to the `header` – [see this previous discussion](https://stackoverflow.com/a/60560997/21146235) – motto Apr 16 '23 at 11:27

0 Answers0