Flappy App Overriding Foundation's top-bar

gistfile1.scss

// Requires a custom media query $medium-down
// Uses the following markup:

// <nav class="top-bar" data-topbar role="navigation">
//   <ul class="title-area">
//     <li class="name">
//       <a href="#" class="clearfix">
//         <div class="logo_image"></div>
//         <h1>
//           <span id="flappy">Flappy</span> 
//           <span id="app">App</span>
//         </h1>
//       </a>
//     </li>
  
//     <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
//   </ul><!-- ends .title-area -->

//   <section class="top-bar-section">
//     <!-- Right Nav Section -->
//     <ul class="right">
//       <li id="about_link"><a class="blue" href="#">About</a></li>
//       <li id="specs_link"><a href="#">Specs</a></li>
//       <li id="pricing_link"><a class="blue" href="#">Pricing</a></li>
//       <li id="contact_link"><a href="#">Contact</a></li>
//       <li id="signup_link"><a class="blue" href="#">Sign Up</a></li>
//     </ul><!-- ends .right -->
//   </section>
// </nav>


@import "http://fonts.googleapis.com/css?family=Lato:300,700.css";
@import "partials/settings";
@import "../public/bower_components/foundation/scss/foundation";

.top-bar{

  @media #{$large-up}{
    height: 150px;
  }

  @media #{$medium-only}{
    height: 110px;
  }

  @media #{$small-only}{
    height: 62px;
  }

  ul.title-area{

    li.name{
      
      height: 60px;
      // background-color:red;

      a{
        background-color: rgba(0,255,0,.2);
        display: block;
        position: relative;

        @media #{$large-up}{
          width: 390px;
          margin-top: 40px;
          margin-left: 30px;
        }

        @media #{$medium-only}{
          margin-top: 20px;
          margin-left: 30px;
        }

        .logo_image{
          width: 100px;
          height: 58px;
          border: 2px dashed red;

          @media #{$large-up}{
            position: absolute;
            left: 185px;
          }

          @media #{$medium-down}{
            float: left;
          }
        }

        h1{
          color: pink;
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: 700;
          
          @media #{$large-up}{
            font-size: 50px;
            line-height: 57px;
          }

          @media #{$medium-only}{
            padding-left: 10px;
            float: left;
            margin-top: 10px;
          }
          
          @media #{$small-only}{
            line-height: 57px;
            padding-left: 10px;
            float: left;
          }


          span{
            @media #{$medium-only}{
              display: block;
              line-height: 20px;
            }

            &#flappy{
            }

            &#app{

              @media #{$large-up}{
                margin-left: 80px;
              }
            }
          }
        }
      }
    }
  }

  .top-bar-section{
    // background-color: orange;

    @media #{$large-up}{
      margin-top: 35px;
      margin-right: 30px;
    }

    @media #{$medium-only}{
      margin-top: 30px;
      margin-right: 30px;
    }

    ul{
      // background-color: yellow;
      li{
        // background-color: green;

        @media #{$medium-up}{
          &#signup_link a{
            padding-right:0 !important;
          }

          &#about_link a{
            padding-left:0 !important;
          }
        }

        a{
          // background-color: blue;
          color: pink;

          @media #{$large-up}{
            border-bottom: 5px solid pink;
            padding-left: 15px !important;
            padding-right:15px !important;

            &:hover{
              border-bottom: 5px solid white;
            }
          }

          @media #{$medium-only}{
            padding-left: 15px !important;
            padding-right: 15px !important;
          }

          &:hover{
            color: white;
          }
        }
      }
    }
  }
}