Cacher is the code snippet organizer for pro developers

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            $(".header").addClass('smaller');
        } else {
            $(".header").removeClass("smaller");
        }
    });
});

<div class="header">
  <div class="container clearfix">
    <h1 id="logo"> LOGO </h1>
    <nav>
      <a href="">Lorem</a>
      <a href="">Ipsum</a>
      <a href="">Dolor</a>
    </nav>
  </div>
</div>

.header {
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #3b8dbd;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
}

@media all and (max-width: 660px) {
  .header h1#logo {
    display: block;
    float: none;
    margin: 0 auto;
    height: 100px;
    line-height:100px;
    text-align: center;
  }
  .header nav {
    display: block;
    float: none;
    height: 50px;
    line-height:50px;
    text-align: center;
    margin: 0 auto;
  }
  .header nav a {
    line-height: 50px;
    margin: 0 10px;
  }
  .header.smaller {
    height: 75px;
  }
  .header.smaller h1#logo {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
  }
  .header.smaller nav {
    height: 35px;
    line-height:35px;
  }
  .header.smaller nav a {
    line-height: 35px;
  }
}