<!--Main Navigation-->

<header class="mb-5 sticky" data-mdb-sticky-direction="both">

  <!-- Jumbotron -->

  <div class="p-3 text-center text-white" style="background-color: #131921">

    <div class="container">

      <div class="row">

        <div class="col-md-6 d-flex justify-content-center justify-content-md-start mb-3 mb-md-0">

          <a href="#!" class="ms-md-2">

            <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="35" />

          </a>

        </div>

​

        <div class="col-md-6 d-flex justify-content-center justify-content-md-end align-items-center">

          <div class="d-flex">

            <!-- Cart -->

            <a class="text-reset me-3" href="#">

              <span><i class="fas fa-shopping-cart"></i></span>

              <span class="badge rounded-pill badge-notification bg-danger">1</span>

            </a>

​

            <!-- Notification -->

            <div class="dropdown">

              <a class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"

                role="button" data-mdb-toggle="dropdown" aria-expanded="false">

                <i class="fas fa-bell"></i>

              </a>

              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">

                <li><a class="dropdown-item" href="#">Some news</a></li>

                <li><a class="dropdown-item" href="#">Another news</a></li>

                <li>

                  <a class="dropdown-item" href="#">Something else here</a>

                </li>

              </ul>

            </div>

​

            <!-- User -->

            <div class="dropdown">

              <a class="text-reset dropdown-toggle d-flex align-items-center hidden-arrow" href="#"

                id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false">

                <img src="https://mdbootstrap.com/img/new/avatars/1.jpg" class="rounded-circle" height="22" alt=""

                  loading="lazy" />

              </a>

              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">

                <li><a class="dropdown-item" href="#">My profile</a></li>

                <li><a class="dropdown-item" href="#">Settings</a></li>

                <li><a class="dropdown-item" href="#">Logout</a></li>

              </ul>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <!-- Jumbotron -->

​

  <!-- Navbar -->

  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #232f3e">

    <!-- Container wrapper -->

    <div class="container justify-content-center justify-content-md-between">

      <!-- Left links -->

      <ul class="navbar-nav flex-row">

        <li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">

          <a class="nav-link" href="#">Bestsellers</a>

        </li>

        <li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">

          <a class="nav-link" href="#">Inspirations</a>

        </li>

        <li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">

          <a class="nav-link" href="#">Blog</a>

        </li>

        <li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">

          <a class="nav-link" href="#">Contact</a>

        </li>

      </ul>

      <!-- Left links -->

​

      <button class="btn btn-outline-light" type="button">

        Download app<i class="fas fa-download ms-2"></i>

      </button>

    </div>

    <!-- Container wrapper -->

  </nav>

  <!-- Navbar -->

​

</header>

<!--Main Navigation-->

​

<div style="height: 1500px">

<p>

  Some content

  </p>

</div>