<header id="header">
    <!-- Navigation -->
<div class="nav-top">

      <!-- Top Row -->
      <div class="top">
        <div class="container">
          <div class="row vh-center">
            <div class="col-md-5 slogan">
               Plumbing and Remodelling Services.
            </div>
            <div class="col-md-2">
              <a href="index.html">
                <img src="img/logo.png" alt="logo" class="logo">
              </a>
            </div>
            <div class="col-md-5 top-social right">
              <div class="social-3 right">
                <a href="index.html#"><i class="icon-facebook"></i></a>
                <a href="index.html#"><i class="icon-dribbble"></i></a>
                <a href="index.html#"><i class="icon-twitter"></i></a>
                <a href="index.html#"><i class="icon-tumblr"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
           <!-- Top Row End -->
<script type="text/javascript">
    $(window).scroll(function(event){
        toggleHeader();
    });

    function toggleHeader() {
        $('header').toggle( $(window).scrollTop() < 50 );
    }
</script>

</div>
</header>