How to fade the first bar, with a half query, keeping the fixed-top, from the navigation bar below?

Así esta la primera barra

<div class="row social">
            <div class="col-xs-12 col-sm-3"></div>
            <div class="col-xs-12 col-sm-3"></div>
            <div class="col-xs-12 col-sm-3">
              <a href="https://www.facebook.com/FelicesyForrados/"><i class="fab fa-facebook fa-2x"></i></a>
              <a href="https://twitter.com/felicesforrados"><i class="fab fa-twitter icontwi fa-2x"></i></a>
              <a href="https://www.youtube.com/user/Felicesyforrados"><i class="fab fa-youtube fa-2x iconyou"></i></a>
            </div>
            <div class="col-xs-12 col-sm-3">
                <a href="#">Registro</a>
                <a href="#">Login</a>
            </div>
        </div>

barra de navegación

<nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <img src="public/images/logo.jpg" width="150px" height="60px" />
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">Beneficios</a></li>
            <li><a href="#">Empresas</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Media query que tengo

@media screen {
    .social{
     display: block;
     position: fixed-top;
     z-index: 1;
    }
}

@media screen and (min-width: 781px) and (max-width: 1024px){
    .social{
      display: inline-grid;
    }
    .navbar-fixed-top{
      display: visible;
    }
}

@media screen and (min-width: 481px) and (max-width: 780px){
     .social{
      display: none;
    }
    .navbar-fixed-top{
      position: fixed-top;
      z-index: 2;
    }
}