<div class="hamburger">

  <svg data-mdb-toggle="collapse"

  data-mdb-target="#navbarToggleExternalContent" id="icon" viewBox="0 0 800 600">

    <path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top"></path>

    <path d="M300,320 L540,320" id="middle"></path>

    <path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>

  </svg>

</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <!-- Container wrapper -->

  <div class="container-fluid">

    <!-- Toggle button -->

​

    <!-- Collapsible wrapper -->

    <div

      class="collapse navbar-collapse justify-content-center "

      id="navbarCenteredExample"

    >

      <!-- Left links -->

      <ul class="navbar-nav 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="#">Link</a>

        </li>

        <!-- Navbar dropdown -->

        <li class="nav-item dropdown">

          <a

            class="nav-link dropdown-toggle"

            href="#"

            id="navbarDropdown"

            role="button"

            data-mdb-toggle="dropdown"

            aria-expanded="false"

          >

            Dropdown

          </a>

          <!-- Dropdown menu -->

          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <li>

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

            </li>

            <li>

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

            </li>

            <li><hr class="dropdown-divider" /></li>

            <li>

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

            </li>

          </ul>

        </li>

        <li class="nav-item">

          <a class="nav-link disabled"

            >Disabled</a

          >

        </li>

      </ul>

      <!-- Left links -->

    </div>

    <!-- Collapsible wrapper -->

  </div>

  <!-- Container wrapper -->

</nav>

​

<div style="height: 1000px">

</div>