Example of a simple navigation with Bootstrap 5

bootstrap-navbar.md

Navbar with Bootstrap 5

Here's the html file. This file assumes that there's two SVG icons (an X and a menu bar) downloaded in the /assets/images/icons directory:

<header class="sticky-top">
  <nav class="navbar navbar-expand-md navbar-dark py-0 py-md-0">
    <div class="container-fluid">
      <!-- Left hand side of navbar -->
      <a class="navbar-brand mb-0" href="/" target="_self">
        <img src="/assets/images/logo-plain-white-400.png" width="30" height="30"
          class="d-inline-block align-top nav-icon" alt="E logo"
        >&nbsp;&nbsp;Emma Sax
      </a>

      <!-- Navbar open/close button when on a smaller screen -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbar-links" aria-controls="navbar-links"
        aria-expanded="false" aria-label="Toggle navigation"
      >
        <img class="nav-icon-menu" src="/assets/images/icons/menu.svg" alt="Menu icon">
        <img class="nav-icon-x" src="/assets/images/icons/x.svg" alt="X icon">
      </button>

      <!-- Page links -->
      <div class="collapse navbar-collapse" id="navbar-links">
        <ul class="navbar-nav ms-auto mt-2 mt-md-0">
          {% assign sorted_pages = site.pages | where_exp: "item", "item.order" | sort: "order" %}

          {% for node in sorted_pages %}
            {% unless node.autogen == "jekyll-paginate-v2" %}
              {% assign navigation_url = node.url | remove: "index.html" %}

              {% if page.url contains navigation_url %}
                {% assign active = "active" %}
              {% else %}
                {% assign active = nil %}
              {% endif %}

              <li class="nav-item {{ active }}">
                <a class="nav-link" href="{{ navigation_url }}">{{ node.title }}</a>
              </li>
            {% endunless %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </nav>
</header>

Here's my custom CSS:

.nav-icon {
  margin-bottom: 1px;
  margin-left: 5px;
  margin-top: 1px;
}

nav.navbar {
  .navbar-brand {
    font-weight: 700;
    padding-right: .5rem;
  }

  .navbar-nav > .nav-item > .nav-link {
    color: var(--navbar-text);
    font-size: 1rem;
    padding-left: .8rem;
    padding-right: .8rem;
  }

  .navbar-nav > .nav-item.active > .nav-link {
    font-weight: 700;
  }

  .navbar-toggler[aria-expanded="false"] > .nav-icon-x {
    display: none;
  }

  .navbar-toggler[aria-expanded="true"] > .nav-icon-menu {
    display: none;
  }

  :focus {
    outline-color: var(--link-focus);
  }

  > .container-fluid > .navbar-toggler {
    border-color: var(--navbar-text);
    color: var(--navbar-text);
    margin-right: 5px;
  }

  background: var(--navbar-background);
}

@media (max-width: 768px) {
  .navbar-collapse {
    padding-bottom: 0.6rem;
  }
}