Menu

A responsive menu that shrinks down to two lines on smaller screens. On smaller screens the main navigation (.menu-main-nav) will be scrolled horizontally if it overflows.

<nav class="menu">
  <a class="menu-brand" href="#">
    <img class="menu-logo" src="http://via.placeholder.com/30x30" alt="Föreningshusets logotyp">
    Föreningshuset
  </a>
  
  <nav class="menu-main-nav">
    <ul class="menu-nav">
      <li class="menu-nav-item">
        <a class="menu-nav-link active" href="#">Hem <span class="sr-only">(nuvarande)</span></a>
      </li>
      <li class="menu-nav-item">
        <a class="menu-nav-link" href="#">Nyheter</a>
      </li>
      <li class="menu-nav-item">
        <a class="menu-nav-link" href="#">Ekonomi</a>
      </li>
      </li>
      <li class="menu-nav-item">
        <a class="menu-nav-link" href="#">Evenemang</a>
      </li>
    </ul>
  </nav>

  <div class="menu-spacer"></div>

  <ul class="menu-nav">
    <li class="menu-nav-item">
      <a class="menu-nav-link" href="#">
        <i class="fal fa-search"></i>
        <span class="sr-only">Sök</span>
      </a>
    </li>
    <li class="menu-nav-item">
      <a class="menu-nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fal fa-user"></i>
        <span class="sr-only">Användare</span>
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Medlemsuppgifter</a>
        <a class="dropdown-item" href="#">Ändra lösenord</a>
        <a class="dropdown-item" href="#">Integritetspolicy</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Logga ut</a>
      </div>
    </li>
  </ul>
</nav>

The .menu-spacer class takes up any remaining space to visually separate different parts of the navigation.

Example without “extra” nav to the right

``` ```