nav bar with center logo and responsive layout

nav-style.scss

/* specific variables to change */
$navbg-color: $light-color;
$nav-text-color: transparentize($first-color, .6);
$nav-text-hover: transparentize($first-color, 0);
header.navigation {
  position: fixed;
  background-color: $navbg-color;
  font-family: $header-font-family;
  height: 4em;
  width: 100%;
  z-index: 999;
  
  .menu-wrapper {
    @include outer-container;
    position: relative;
    z-index: 9999;
  }

  .logo {
    display: none;
    @include media ($large-screen) {
      @include span-columns( 4 );
      @include shift( 4 );
      @include omega(  );
      display: block;
      float: left;
      max-height: 3.7em;
      padding-left: 1em;
      padding-right: 2em;
      clear:both;
    }
    

    img {
      max-height: 3.7em;
      padding: .8em 0;
    }
  }
  .site-title {
    @include span-columns( 3 );
    display: block;
    color: $nav-text-color;
    font-size: 2em;
    line-height: 2em;
    &:hover{
      color: $nav-text-hover;
    }
    @include media($large-screen){
      display: none;
    }
  }

  .navigation-menu-button {
    @include span-columns( 1 );
    color: $nav-text-color;
    cursor: pointer;
    display: block;
    float: right;
    font-family: $header-font-family;
    font-weight: 700;
    line-height: 3.7em;
    margin: 0;
    text-transform: uppercase;

    @include media ($large-screen) {
      display: none;
    }

    &:hover {
      color: $nav-text-hover;
    }
  }
  .nav {
    @include media($large-screen) {
      @include span-columns( 4 );
      @include omega();
      @include shift( -4 );
      float: left
    }
  }
  ul#navigation-menu {    
    clear: both;
    -webkit-transform-style: preserve-3d; // stop webkit flicker
    display: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 100%;
    z-index: 9999;

    @include media ($large-screen) {
      display: inline;
      margin: 0;
      padding: 0;
    }
  }

  ul li {
    background: $navbg-color;
    display: block;
    line-height: 3.7em;
    overflow: hidden;
    padding-right: .8em;
    text-align: right;
    width: 100%;
    z-index: 9999;

    @include media ($large-screen) {
      background: transparent;
      display: inline;
      line-height: 3.7e,;
      padding-right: 2em;
      text-decoration: none;
      width: auto;
    }

    a {
      font-weight: 400;
      color: $nav-text-color;

      &:hover {
        color: $nav-text-hover;
      }
    }
  }
  .social-links {
    @include media($large-screen) {
      @include span-columns( 2 );
      @include omega( 3 );
      float: right;
      display: block;
    }
    ul {
      display: inline;


      li {
        display: inline;
        float: right;
        line-height: 3.7em;
        overflow: hidden;
        padding-right: .8em;
        text-align: right;

      }
    }
  }

}

Navbar.html

 <header class="navigation">
  <div class="menu-wrapper">
    <a href="{{ site.url }}" class="logo">
      <img src="{{ site.url }}/img/{{ site.logo }}" alt="{{ site.title }}">
    </a>
    <a href="#" class="site-title">{{ site.title}}</a>
    <p class="navigation-menu-button" id="js-mobile-menu">&#9776;</p>
    <div class="nav">
      <ul id="navigation-menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="3">Blog</a></li>
        <li><a href="#">Plan de Nutrición</a></li>
        <li><a href="#">Contacto</a></li>
        <div class="social-links">
          <ul>
            {% if site.social.facebook %}
              <li>
                <a a href="http://facebook.com/{{ site.social.facebook }}">
                  <span class="fa-stack fa-lg">
                    <i class="fa fa-square-o  fa-stack-2x"></i>
                    <i class="fa fa-twitter fa-stack-1x"></i>
                  </span>
                </a>
                  </li>
              {% endif %}
            {% if site.social.twitter %}
              <li>
                <a a href="http://twitter.com/{{ site.social.twitter }}">
                  <span class="fa-stack fa-lg">
                    <i class="fa fa-square-o  fa-stack-2x"></i>
                    <i class="fa fa-facebook fa-stack-1x"></i>
                  </span>
                </a>
              </li>
            {% endif %}
          </ul>
        </div>
      </ul>
    </div>
  </div>
 </header>
<!-- ends nav-logo-header -->

variables.scss

// Typography
///////////////////////////////////////////////////////////////////////////////
$google-head-font: "Ubuntu";
$google-base-font: "Vollkorn";

$sans-serif: $helvetica;
$serif: $georgia;

$base-font-family: "$google-base-font, $sans-serif";
$header-font-family: "$google-head-font, $base-font-family";

// Sizes
///////////////////////////////////////////////////////////////////////////////
$base-font-size: 1em;
$base-line-height: $base-font-size * 1.5;
$base-border-radius: em(3);

// Colors
///////////////////////////////////////////////////////////////////////////////

$first-color: #E9633B;	//orange
$second-color: #63AA9C;	//blue
$light-color: #EEEBE2;	//light coffe
$medium-color: #AEAB9D;	//medium coffe
$dark-color: #221E1D;	//dark coffe


$blue: #477DCA;
$dark-gray: #333;
$medium-gray: #999;
$light-gray: #DDD;
$light-red: #FBE3E4;
$light-yellow: #FFF6BF;
$light-green: #E6EFC2;

// Body Color
$base-body-color: white;

//  Font Colors
$base-font-color: $dark-gray;
$base-accent-color: $blue;

//  Text Link Colors
$base-link-color: $base-accent-color;
$hover-link-color: darken($base-accent-color, 15);

// Border color
$base-border-color: $light-gray;

// Flash Colors
$error-color: $light-red;
$notice-color: $light-yellow;
$success-color: $light-green;