Navbar

<nav class="c-navbar c-navbar--dark">
  <div class="c-navbar__top l-align-center-x">
    <a href="https://www.texastribune.org" class="c-navbar__logo l-align-center-self">
      <span class="is-sr-only">The Texas Tribune</span>
      <svg aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 585.7 64.51' class="l-display-block l-width-full"> <path fill="#fff" d='M84.94 10.23v45.85H74.63V10.23H64.49V1.16H95v9.07zM120.08 56.08V33.57h-11.46v22.51H98.39V1.16h10.23v23.25h11.46V1.16h10.31v54.92zM136.78 56.08V1.16H163V10h-16v13.59h11.05v8.08H147v15.26h16v9.15zM198.62 10.23v45.85h-10.31V10.23h-10.14V1.16h30.51v9.07zM213.1 56.08V1.16h26.23V10h-16v13.59h11v8.08h-11v15.26h16v9.15zM265.89 56.08l-6.44-19-7 19h-10l11.29-27.71-10.62-27.21h10.73l6 19 6.59-19h10.07l-11 26.39 11.05 28.53zM301.7 56.08l-1.81-10.8h-9.73l-2 10.8h-9.57l11.07-54.92h11.47l11 54.92zM295.27 16l-3.71 21.2h7zM328.66 57.32c-9.4 0-15.25-5.61-15.25-14.19v-3.79h9.4v3.22c0 4 1.9 6.26 5.61 6.26s5.44-2.14 5.44-5.52c0-4.37-2.8-7.34-8.25-11.38-5.6-4-11.71-9.49-11.71-17.15C313.9 6.85 319 0 328.91 0c8.66 0 14.43 5.94 14.43 14.1v3.55H334v-3.3c0-3.38-1.72-5.85-5.19-5.85a4.63 4.63 0 0 0-4.95 4.94c0 4.62 2.72 7 8.82 11.47 6.52 4.86 11.14 9.81 11.14 17.23.02 8.86-6.08 15.18-15.16 15.18zM377.84 10.23v45.85h-10.31V10.23h-10.15V1.16h30.52v9.07zM417.57 56.41c-4.05 0-5.61-3.3-5.61-8.08V38c0-2.56-1.32-4.7-4.21-4.7h-5.36v22.78h-10.22V1.16h16.9c7.51 0 12.54 4.29 12.54 12v7.76c0 4.12-1.9 7.17-6.19 8.49a8.42 8.42 0 0 1 6.35 8.33v10.01a7.69 7.69 0 0 0 2 5.61v3zm-5.94-42.88c0-2.48-1.07-4-3.63-4h-5.61v16.2h5.2c2.64 0 4-1.4 4-4.37zM429.8 56.08V1.16H440v54.92zM465.59 56.08h-17.32V1.16h17.16c7.5 0 12.12 4 12.12 11.62v5.94c0 4.7-1.81 8.25-6.51 9.24 4.95 1.32 6.76 4.7 6.76 9.32v7.17c0 7.67-4.7 11.63-12.21 11.63zm2.15-42.55c0-2.48-1.08-4-3.63-4h-5.53v15.13h5.12c2.63 0 4-1.4 4-4.29zm.16 23c0-2.89-1.4-4.37-4-4.37h-5.28v15.5h5.78c2.55 0 3.54-1.4 3.54-4zM499.34 57.32c-8.9 0-15.5-5.69-15.5-13.94V1.16h10.39v42.22c0 3.22 1.81 5 5.11 5s5.2-1.81 5.2-5V1.16h10v42.22c-.02 8.25-6.29 13.94-15.2 13.94zM544.66 56.08L534 32.66l-3.87-8.74v32.16h-9.4V1.16h8.82L539.71 25l3.63 8.74V1.16h9.24v54.92zM559.48 56.08V1.16h26.22V10h-16v13.59h11v8.08h-11v15.26h16v9.15z'/><path d='M0 .6v63.91l12.85-8h43V.6zm40 44.63l-12.22-8.06-12.24 8.06 3.88-14.13L8 22l14.63-.68 5.15-13.76L33 21.27l14.58.73-11.44 9.1z' fill='#ffc200'/></svg>

    </a>
    <div class="c-navbar__content">
      <ul class="c-navbar__items c-navbar__items--no-space is-hidden-until-bp-l">
        <li class="c-navbar__item">
          <a href="#" class="is-active c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated t-size-xxs t-uppercase t-lsp-m">
            <strong>Link 1</strong>
          </a>
        </li>
        <li class="c-navbar__item">
          <a href="#"
            class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated t-size-xxs t-uppercase t-lsp-m">
            <strong>Link 2</strong>
          </a>
        </li>
        <li class="c-navbar__item">
          <a href="#"
            class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated t-size-xxs t-uppercase t-lsp-m">
            <strong>Link 3</strong>
          </a>
        </li>
        <li class="c-navbar__item">
          <a href="#"
            class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated t-size-xxs t-uppercase t-lsp-m">
            <strong>Link 4</strong>
          </a>
        </li>
      </ul>

      <!--
        You'll need to toggle between "menu" and "close" with some JS
      -->
      <ul class="c-navbar__items is-hidden-from-bp-l">
        <li class="c-navbar__item c-navbar__item--no-space">
          <button aria-label="Show menu" class="c-navbar__item-content c-navbar__clickable t-size-xxs t-uppercase t-lsp-m">
            <span class="c-icon">
              <svg aria-hidden="true" focusable="false">
                <use xlink:href="#bars"></use>
              </svg>
            </span>
            <strong>&nbsp;Menu</strong>
          </button>
        </li>
        <li class="c-navbar__item is-hidden">
          <button aria-label="Hide menu" class="c-navbar__item-content c-navbar__clickable t-size-xxs t-uppercase t-lsp-m">
            <span class="c-icon">
              <svg aria-hidden="true" focusable="false">
                <use xlink:href="#close"></use>
              </svg>
            </span>
            <strong>&nbsp;Close</strong>
          </button>
        </li>
      </ul>
    </div>

    <!--
      You'll need to toggle dropdown visiblity with JS
    -->
    <div class="c-navbar__dropdown is-hidden is-hidden-from-bp-l">
      <ul class="c-navbar__dropdown-items">
        <li class="c-navbar__dropdown-item">
          <a href="#" class="is-active c-navbar__clickable t-size-xxs t-uppercase t-lsp-m">
            <strong>Link 1</strong>
          </a>
        </li>
        <li class="c-navbar__dropdown-item">
          <a href="#" class="c-navbar__clickable t-size-xxs t-uppercase t-lsp-m">
            <strong>Link 2</strong>
          </a>
        </li>
        <li class="c-navbar__dropdown-item">
          <a href="#" class="c-navbar__clickable t-size-xxs t-uppercase t-lsp-m">
            <strong>Link 3</strong>
          </a>
        </li>
        <li class="c-navbar__dropdown-item">
          <a href="#" class="c-navbar__clickable t-size-xxs t-uppercase t-lsp-m">
            <strong>Link 4</strong>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>