header.html

<div class="universal-navbar">
  <div class="universal-navbar__container">
    <div class="universal-navbar__col universal-navbar__col--toggle">
      <button class="universal-navbar__mobile-toggle">
        <svg
          class="universal-navbar__menu-icon"
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 18 18"
        >
          <path
            id="Menu"
            d="M0,18V15.75H18V18Zm0-7.875V7.875H18v2.25ZM0,2.25V0H18V2.25Z"
            fill="#232323"
          />
        </svg>
        <svg
          class="universal-navbar__close-icon"
          enable-background="new 0 0 100 100"
          version="1.1"
          viewBox="0 0 100 100"
          xml:space="preserve"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g class="st1" enable-background="new">
            <path
              class="st2"
              d="M39.84,49.64L1.04,11.06L11.33,0.77l38.8,38.58L88.71,0.77L99,11.06L60.42,49.64L99.2,88.65L88.92,98.94   L50.13,59.93L11.12,98.94L0.83,88.65L39.84,49.64z"
              fill="#ECF9F8"
            />
          </g>
        </svg>
      </button>
    </div>
  </div>
  <div class="universal-navbar__container">
    <div class="universal-navbar__col">
      <ul class="universal-navbar__nav universal-navbar__nav--left">
        <li>
          <a
            href="https://allocations.access-ci.org"
            rel="noopener noreferrer"
            >Allocations</a
          >
        </li>
        <li>
          <a
            href="https://support.access-ci.org"
            rel="noopener noreferrer"
            >Support</a
          >
        </li>
        <li>
          <a
            href="https://operations.access-ci.org"
            rel="noopener noreferrer"
            >Operations</a
          >
        </li>
        <li>
          <a
            href="https://metrics.access-ci.org"
            rel="noopener noreferrer"
            >Metrics</a
          >
        </li>
      </ul>
    </div>
    <div class="universal-navbar__col">
      <ul class="universal-navbar__nav universal-navbar__nav--right">
        <li>
          <a
            href="https://access-ci.org/"
            rel="noopener noreferrer"
            >ACCESS Home</a
          >
        </li>
        <li>
          <a
            href="https://access-ci.org/about"
            rel="noopener noreferrer"
            >About</a
          >
        </li>
        <li>
          <a
            href="https://access-ci.org/news"
            rel="noopener noreferrer"
            >News</a
          >
        </li>
        <li>
          <a href="https://access-ci.org/search">
            <svg
              version="1.1"
              class="universal-navbar__search-icon"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              width="18"
              height="18"
              viewBox="0 0 100 100"
              style="enable-background: new 0 0 100 100"
              xml:space="preserve"
            >
              <g>
                <path
                  class="st0"
                  d="M98.22,92.72l-5.48,5.47c-1.8,1.82-4.74,1.82-6.55,0L66.9,78.9c-0.87-0.87-1.35-2.05-1.35-3.29v-3.15
                                c-6.83,5.34-15.42,8.51-24.76,8.51c-22.23,0-40.24-18.01-40.24-40.24S18.55,0.49,40.78,0.49S81.02,18.5,81.02,40.73
                                c0,9.34-3.18,17.94-8.51,24.76h3.15c1.24,0,2.42,0.48,3.29,1.35l19.29,19.29C100.03,87.95,100.03,90.89,98.22,92.72z M65.54,40.73
                                c0-13.7-11.08-24.76-24.76-24.76c-13.7,0-24.76,11.08-24.76,24.76c0,13.7,11.08,24.76,24.76,24.76
                                C54.47,65.49,65.54,54.41,65.54,40.73z"
                />
              </g>
            </svg>

            <span class="sr-only">Search</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<script>
  // Get the menu toggle element
  const universalNavbarMobileToggle = document.querySelector(
    ".universal-navbar__mobile-toggle"
  );
  // Toggle open class on click
  universalNavbarMobileToggle.addEventListener("click", (e) => {
    document
      .querySelector(".universal-navbar")
      .classList.toggle("universal-navbar--open");
  });
</script>

<header class="site-header">

  <div class="wrapper">
    {%- assign default_paths = site.pages | map: "path" -%}
    {%- assign page_paths = site.header_pages | default: default_paths -%}
    <a class="site-title" rel="author" href="{{ "/" | relative_url }}"><br /><img alt="ACCESS" src="/access-logo.svg" title="ACCESS" width="269" height="41" /><br />Identity Management</a>
  </div>
</header>