<!--
Forum question answer only:

https://www.sitepoint.com/community/t/reducing-the-size-of-my-icons-up-in-the-left-and-position-the-search-icon-on-the-left-of-sok-item/389010


-->
<header>
  <div class="toolbar">
    <ul class="toolbar-inner">
      <li>
        <a class="small-logos" href="https://www.shl.se/">
          <img src="https://www.leksandsif.se/p/_nuxt/img/shl@2x.afa2ccc.png" max-height="20" max-width="20">
        </a>
      </li>
      <li>
        <a class="small-logos" href="https://www.svenskaspel.se/">
          <img src="https://www.leksandsif.se/p/_nuxt/img/svenskaspel@2x.4d6e366.png" max-height="20" max-width="20">
        </a>
      </li>
      <li>
        <a class="small-logos" href="https://www.norrlandsguld.se/">
          <img src="https://www.leksandsif.se/p/_nuxt/img/norrlands@2x.1897310.png" max-height="20" max-width="20">
        </a>
      </li>
      <li>
        <a class="small-logos" href="https://www.bauhaus.se/">
          <img src="https://www.leksandsif.se/p/_nuxt/img/bauhaus@2x.72a7c47.png" max-height="20" max-width="20">
        </a>
      </li>
      <li>
        <a class="small-logos" href="https://www.aftonbladet.se/">
          <img src="https://www.leksandsif.se/p/_nuxt/img/sportbladet@2x.40b62db.png" max-height="20" max-width="20">
        </a>
      </li>
      <li class="topbar-right toolbar-link"><a href="#">Link 1</a></li>
      <li class="toolbar-link"><a href="#">Link 2 here</a></li>
      <li class="toolbar-link"><a href="#">Link 3 goes here</a></li>
    </ul>
    <!-- end toolbar-inner -->
  </div>
  <!-- end toolbar -->
  <nav>
    <!-- main nav will go here -->
  </nav>
</header>

/*
Forum question answer only:

https://www.sitepoint.com/community/t/reducing-the-size-of-my-icons-up-in-the-left-and-position-the-search-icon-on-the-left-of-sok-item/389010
*/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  margin: 0;
}
.toolbar {
  background: #000944;
}
.toolbar-inner {
  display: flex;
  align-items: center;
  max-width: 1380px;
  margin: auto;
  padding: 0;
  list-style: none;
}
.toolbar-inner li {
  padding: 3px;
}
.small-logos {
  padding: 3px;
  display: block;
  margin-right: 0.5rem;
}
.small-logos img {
  width: auto;
  max-height: 22px;
}
.toolbar-link a {
  color: #fff;
  text-decoration: none;
  display: block;
  margin-left: 1rem;
}
.toolbar-link a:hover {
  text-decoration: underline;
}
.topbar-right {
  margin-left: auto;
}
/* note media queries will be required to rearrange this content when the screen is smaller than about 760px */