ask-mutual-fund/components/header.html

<nav class="navbar navbar-expand-lg">
  <div class="container">
    <!-- Logo -->
    <div class="mobile-adj">
      <a class="navbar-brand d-flex align-items-center" href="">
        <img
          src="./assests/images/ask-mutual-fund-logo.svg"
          alt="My Logo"
          height="40"
        />
      </a>
      <!-- Toggle Button -->
      <button class="navbar-toggler" type="button">
        <span class="open-icon">&#9776;</span>
        <!-- hamburger -->
        <span class="close-icon d-none">&times;</span>
        <!-- close icon -->
      </button>
    </div>

    <!-- Navbar Content -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <div class="d-flex w-100 justify-content-between align-items-center">
        <!-- Center Links -->
        <ul class="navbar-nav gap-menu mx-auto text-center">
          <li class="nav-item">
            <a class="nav-link" href="#/our-fund">Our Funds</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#/our-team">Our Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#/about">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#/contact">Contact Us</a>
          </li>
          <li class="nav-item d-lg-none">
            <a class="nav-link" href="#/contact">Carrer</a>
          </li>
          <li class="nav-item d-lg-none">
            <a class="nav-link" href="#/contact">Login</a>
          </li>
        </ul>

        <!-- Right Buttons -->
        <ul class="navbar-nav ms-auto align-items-lg-center">
          <li class="nav-item me-3">
            <a href="#" class="invest-btn px-3 py-2">Invest Now</a>
          </li>
          <li class="nav-item d-flex align-items-center login-btn">
            <span class="">Login</span>
            <i
              class="bi bi-chevron-down"
              style="
                font-size: 13px;
                color: #b18c4a;
                margin-left: 8px;
                display: none;
              "
            ></i>
          </li>
        </ul>

        <div class="topbar-mobile">
          <div class="mobile-call">
            <a href="tel:(+91) 93256 07030" class="color-b">
              <i
                class="bi bi-telephone"
                style="width: 20px; height: 20px; color: #b18c4a"
              ></i>
              (+91) 93256 07030
            </a>
            <a href="mailto:askdb@gmail.com" class="color-b">
              <i
                class="bi bi-envelope"
                style="width: 20px; height: 20px; color: #b18c4a"
              ></i>
              askdb@gmail.com
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<div class="topbar py-2">
  <div class="container d-flex justify-content-between align-items-center">
    <div>
      <a href="tel:(+91) 93256 07030" class="color-a">
        <i class="bi bi-telephone me-2" style="width: 16px; height: 16px"></i>
        (+91) 93256 07030
      </a>
      <a href="mailto:askdb@gmail.com" class="color-a">
        <i
          class="bi bi-envelope ms-3 me-1"
          style="width: 16px; height: 16px"
        ></i>
        askdb@gmail.com
      </a>
    </div>
  </div>
</div>

<script src="./js/navbar.js"></script>