<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse text-white">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">H</a>
    <ul class="navbar-nav mr-auto social-media">
      <li class="nav-item">
        <a class="nav-link fa fa-youtube" href="#"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link fa fa-facebook" href="#"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link fa fa-twitter" href="#"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link fa fa-twitch" href="#"></a>
      </li>
    </ul>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">News</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Games</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Media</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Store</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Streamers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Partners</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>