<!-- Bootstrap CSS CDN -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />


<!--  chnage the .navbar-expand{-sm|-md|-lg|-xl|-xxl} to make the navbar responsive -->
  <body>
    <nav class="navbar navbar-expand-llg bg-info fixed-top">
      <div class="container-fluid">
        <!-- Navbar Logo -->
        <img
          class="navbar-brand text-success"
          src="data:image/png;base64,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"
        />

        <!-- Navbar mobile Hamburger -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar Items -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#section-1">Link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section-2">Link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section-3">Link 3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section-4">Link 4</a>
            </li>
          </ul>
          <!-- Navbar form -->
          <form class="d-flex">
            <input
              class="form-control me-2"
              type="email"
              placeholder="Enter email address"
            />
            <button class="btn btn-success" type="submit">RSVP</button>
          </form>
        </div>
      </div>
    </nav>

    <main>
      <section
        id="section-1"
        class="vh-100 text-center fs-2 text-white bg-danger"
        style="padding-top: 100px"
      >
        Section 1
      </section>
      <section
        id="section-2"
        class="vh-100 text-center fs-2 text-white bg-warning"
        style="padding-top: 100px"
      >
        Section 2
      </section>
      <section
        id="section-3"
        class="vh-100 text-center fs-2 text-white bg-success"
        style="padding-top: 100px"
      >
        Section 3
      </section>
      <section
        id="section-4"
        class="vh-100 text-center fs-2 text-white bg-info"
        style="padding-top: 100px"
      >
        Section 4
      </section>
    </main>

    <!-- Bootstrap JavaScript CDN -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.