Generated by SassMeister.com.

SassMeister-input-HTML.html

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://raw.githubusercontent.com/daneden/animate.css/master/animate.css' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-header content slide">
  <span class="logo">
    <a class="animated bounceIn" href="http://ash.guru">Menu</a>
  </span>
  <ul class="nav-social">
    <li>
      <a href="www.facebook.com">
        <span class="fa fa-facebook"></span>
      </a>
    </li>
    <li>
      <a href="www.twitter.com">
        <span class="fa fa-twitter"></span>
      </a>
    </li>
    <li>
      <a href="www.google.es">
        <span class="fa fa-google-plus"></span>
      </a>
    </li>
    <li>
      <a href="www.linkedin.com">
        <span class="fa fa-linkedin"></span>
      </a>
    </li>
  </ul>
</div>
<nav class="slide">
  <ul>
    <li>
      <a href="www.home.com">Home</a>
    </li>
    <li>
      <a href="www.home.com">About Me</a>
    </li>
    <li>
      <a href="www.home.com">What I do</a>
    </li>
    <li>
      <a href="www.home.com">Work</a>
    </li>
    <li>
      <a href="www.home.com">Blog</a>
    </li>
    <li>
      <a class="nav-btn nav-btn-dark-blue" href="www.google.es">
        <i class="fa fa-send"></i>
        Get In Touch
      </a>
    </li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

.nav-header {
  background:white;
  border-bottom:1px solid #3d464d;
}
.logo {
  margin-left:5%;
}
.logo a {
  font-family:"Lobster";
  font-size:3rem;
  color:#1692F2;
  bottom:2px;
  -webkit-transition:background-color ease 0.5s, color ease 0.5s, border ease 0.5s, box-shadow ease 0.5s;
  
  &:hover {
    color:#3d464d;
    -webkit-transition:background-color ease 0.5s, color ease 0.5s, border ease 0.5s, box-shadow ease 0.5s;
  }
}
a {
  text-decoration:none;
}
.bounceIn {
  -webkit-animation-name:bounceIn;
  -webkit-animation-duration:.75s;
}
.nav-social {
  list-style:none;
  display:inline-block;
  -webkit-padding-start:0;
  margin-bottom:5px;
  
  
  ul {
    margin-top:5px;
    line-height:20px;
    
  }
  
  li {
    
    float:left;
    margin-left:14px;
    line-height:20px;
    
    span {
      color:black;
      line-height:20px;
      
    }
    
  }
  
}
nav {
  padding-left:5%;
  padding-right:5%;
  position:absolute;
  top:0;
  right:5px;
  display:block;
  margin-bottom:15px;
  
  li {
    display:inline-block;
    margin-left:20px;
    margin-top:14px;
  }
  a {
    text-transform:uppercase;
    color:#8a8a8a;
    font-family:"proxima-nova";
    padding-bottom:5px;
    
    &:hover {
      border-bottom:3px solid;
      transition: ease 0.5s;
    }
    
  }
  
}

ul {
  list-style:none;
}
.nav-btn-dark-blue {
  background-color:#5A7080;
  border: 1px solid #5A7080;
  color:white;
  
  &:hover {
    background:white;
    color:#5A7080;
    border:1px solid #5A7080;
  }
}
.nav-btn {
  padding:12px 20px 13px 24px;
  border-radius:2px;
  margin-top:13px;
  margin-right:11px;
  letter-spacing:1px;
    
  a {
    text-decoration:none;
  }
  
  i {
    position:relative;
    right:12px;
  }
}
fa {
  display:inline-block;
}

SassMeister-output.css

.nav-header {
  background: white;
  border-bottom: 1px solid #3d464d;
}

.logo {
  margin-left: 5%;
}

.logo a {
  font-family: "Lobster";
  font-size: 3rem;
  color: #1692F2;
  bottom: 2px;
  -webkit-transition: background-color ease 0.5s, color ease 0.5s, border ease 0.5s, box-shadow ease 0.5s;
}
.logo a:hover {
  color: #3d464d;
  -webkit-transition: background-color ease 0.5s, color ease 0.5s, border ease 0.5s, box-shadow ease 0.5s;
}

a {
  text-decoration: none;
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  -webkit-animation-duration: .75s;
}

.nav-social {
  list-style: none;
  display: inline-block;
  -webkit-padding-start: 0;
  margin-bottom: 5px;
}
.nav-social ul {
  margin-top: 5px;
  line-height: 20px;
}
.nav-social li {
  float: left;
  margin-left: 14px;
  line-height: 20px;
}
.nav-social li span {
  color: black;
  line-height: 20px;
}

nav {
  padding-left: 5%;
  padding-right: 5%;
  position: absolute;
  top: 0;
  right: 5px;
  display: block;
  margin-bottom: 15px;
}
nav li {
  display: inline-block;
  margin-left: 20px;
  margin-top: 14px;
}
nav a {
  text-transform: uppercase;
  color: #8a8a8a;
  font-family: "proxima-nova";
  padding-bottom: 5px;
}
nav a:hover {
  border-bottom: 3px solid;
  transition: ease 0.5s;
}

ul {
  list-style: none;
}

.nav-btn-dark-blue {
  background-color: #5A7080;
  border: 1px solid #5A7080;
  color: white;
}
.nav-btn-dark-blue:hover {
  background: white;
  color: #5A7080;
  border: 1px solid #5A7080;
}

.nav-btn {
  padding: 12px 20px 13px 24px;
  border-radius: 2px;
  margin-top: 13px;
  margin-right: 11px;
  letter-spacing: 1px;
}
.nav-btn a {
  text-decoration: none;
}
.nav-btn i {
  position: relative;
  right: 12px;
}

fa {
  display: inline-block;
}

SassMeister-rendered.html

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://raw.githubusercontent.com/daneden/animate.css/master/animate.css' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-header content slide">
  <span class="logo">
    <a class="animated bounceIn" href="http://ash.guru">Menu</a>
  </span>
  <ul class="nav-social">
    <li>
      <a href="www.facebook.com">
        <span class="fa fa-facebook"></span>
      </a>
    </li>
    <li>
      <a href="www.twitter.com">
        <span class="fa fa-twitter"></span>
      </a>
    </li>
    <li>
      <a href="www.google.es">
        <span class="fa fa-google-plus"></span>
      </a>
    </li>
    <li>
      <a href="www.linkedin.com">
        <span class="fa fa-linkedin"></span>
      </a>
    </li>
  </ul>
</div>
<nav class="slide">
  <ul>
    <li>
      <a href="www.home.com">Home</a>
    </li>
    <li>
      <a href="www.home.com">About Me</a>
    </li>
    <li>
      <a href="www.home.com">What I do</a>
    </li>
    <li>
      <a href="www.home.com">Work</a>
    </li>
    <li>
      <a href="www.home.com">Blog</a>
    </li>
    <li>
      <a class="nav-btn nav-btn-dark-blue" href="www.google.es">
        <i class="fa fa-send"></i>
        Get In Touch
      </a>
    </li>
  </ul>
</nav>