Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav class="navbar navbar-default navbar-fixed-top" id="header_nav">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar large"></span>
        <span class="icon-bar medium"></span>
        <span class="icon-bar small"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="https://www.usnewsuniversitydirectory.com/images/canvas/usn-logo.png" /></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown full_width">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">COLLEGES <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Online Programs</a></li>
            <li><a href="#">Degree Type</a></li>
            <li><a href="#">By Location</a></li>
            <li><a href="#">By Major</a></li>
          </ul>
        </li>
        <li><a href="#">CAREERS</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">VIDEO</a></li>
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
        <!-- Button trigger modal -->
        <li><a href="#"><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#subscribe">Subscribe</button></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Profile</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">My Schools</a></li>
            <li><a href="#">Log out</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

<div class="container">
  <!-- Modal -->
  <div class="modal fade" id="subscribe" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="flame_badge_fake"></div>
          <h2>Want to receive updates and important news about us?</h2>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Your Email Here">
            </div>
            <button type="submit" class="btn btn-default">Subscribe</button>
          </form>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<section id="primary">
  <div class="container">
    <div class="tag">Career</div>
    <div class="row">
      <div class="col-md-5">
        <h1>Public Service Sector Offers Great Education and Career Opportunities</h1>
      </div>
    </div>
    <div class="row primary_articles">
      <div class="col-md-3">
        <h4>Public Service Sector Offers Great Education and Career Opportunities</h4>
        <span>1h ago</span>
      </div>

      <div class="col-md-3">
        <h4>New Program Prepares Foreign Undergraduates for U.S. Higher Ed</h4>
        <span>4h ago</span>
      </div>

      <div class="col-md-3">
        <h4>GRE Increasingly Popular for International Business Students</h4>
        <span>15h ago</span>
      </div>
      
      <div class="col-md-3">
        <h4>May is National Military Appreciation Month</h4>
        <span>1d ago</span>
      </div>
    </div>
  </div>
</section>

<section id="primary_two_col">
  <div class="container">
    <div class="col-md-8">
      <img src="http://marketing.bisk.com/z_blog/capital_image.jpg" />
    </div>
    <div class="col-md-4 trending">
      <h4><span class="glyphicon glyphicon-flash" aria-hidden="true"></span> Trending <a class="more">+ More</span></h4>
      <ul>
        <li><a href="#">Public Service Sector Offers Great Education and Career Opportunities <span>1h ago</span></a></li>
        <li><a href="#">New Program Prepares Foreign Undergraduates for U.S. Higher Ed <span>4h ago</span></a></li>
        <li><a href="#">GRE Increasingly Popular for International Business Students <span>15h ago</span></a></li>
        <li><a href="#">May is National Military Appreciation Month <span>1d ago</span></a></li>
      </ul>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="col-md-3 sidebar">
      <h5>Categories</h5>
      <ul>
        <li><a href="#">Art & Design</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#">Criminal Justice</a></li>
        <li><a href="#">Education & Teaching</a></li>
        <li><a href="#">Engineering</a></li>
        <li><a href="#">Healthcare</a></li>
        <li><a href="#">Human Services</a></li>
        <li><a href="#">Legal/Paralegal</a></li>
        <li><a href="#">Liberal Arts</a></li>
        <li><a href="#">Nursing</a></li>
        <li><a href="#">Political Science</a></li>
        <li><a href="#">Religious Studies</a></li>
        <li><a href="#">Science</a></li>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Trades & Careers</a></li>
      </ul>
    </div>
    <div class="col-md-4">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate ex nec congue tempus. In aliquet nunc justo, at pretium sapien interdum sit amet. Curabitur porta risus quis sapien vehicula sollicitudin non nec neque. Nam laoreet, mauris a condimentum pretium, elit arcu rhoncus urna, quis efficitur leo quam vitae ex. Donec consectetur aliquet rutrum. Nam sodales turpis arcu, vitae faucibus orci tincidunt in. Quisque fringilla, lacus eu venenatis aliquam, diam ligula mattis dolor, sed elementum leo massa at nulla. Sed finibus hendrerit elementum.</p>

      <p>Suspendisse tincidunt, nulla et malesuada suscipit, ante lectus consequat ligula, sit amet malesuada est neque ac ex. Praesent lacinia diam ac massa fermentum, vitae volutpat ex consectetur. Quisque placerat, dolor quis blandit eleifend, tortor sem rhoncus orci, id auctor tortor justo pharetra lorem. Curabitur tortor odio, tempor eget posuere eget, laoreet ut eros. Curabitur egestas sem id justo malesuada, ut semper lorem vulputate. Donec tempus est non nulla lobortis consequat. Donec ut dolor enim. Pellentesque sit amet quam orci.</p>
    </div>
    <div class="col-md-4">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate ex nec congue tempus. In aliquet nunc justo, at pretium sapien interdum sit amet. Curabitur porta risus quis sapien vehicula sollicitudin non nec neque. Nam laoreet, mauris a condimentum pretium, elit arcu rhoncus urna, quis efficitur leo quam vitae ex. Donec consectetur aliquet rutrum. Nam sodales turpis arcu, vitae faucibus orci tincidunt in. Quisque fringilla, lacus eu venenatis aliquam, diam ligula mattis dolor, sed elementum leo massa at nulla. Sed finibus hendrerit elementum.</p>

      <p>Suspendisse tincidunt, nulla et malesuada suscipit, ante lectus consequat ligula, sit amet malesuada est neque ac ex. Praesent lacinia diam ac massa fermentum, vitae volutpat ex consectetur. Quisque placerat, dolor quis blandit eleifend, tortor sem rhoncus orci, id auctor tortor justo pharetra lorem. Curabitur tortor odio, tempor eget posuere eget, laoreet ut eros. Curabitur egestas sem id justo malesuada, ut semper lorem vulputate. Donec tempus est non nulla lobortis consequat. Donec ut dolor enim. Pellentesque sit amet quam orci.</p>
    </div>
  </div>
</section>

<section class="school_filter">
  <div class="container">
    <div class="col-md-3">
      <form>
        <select class="form-control">
          <option>Regional Colleges</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </form>
    </div>
    <div class="col-md-9">
      <ul class="nav nav-pills" role="tablist">
        <li><a href="#">North</a></li>
        <li><a href="#">South</a></li>
        <li><a href="#">Midwest</a></li>
        <li><a href="#">West</a></li>
      </ul>
    </div>
</div>
</section>

<section class="twitter container">
  <div class="col-md-4">
    <p>“I can’t believe how awesome this website is! I just can’t get enough...</p>
    <span class="tw_hashtag">#awesome</span> <span class="tw_hashtag">#usnews</span> 
    <a class="tw_handle">@JustinRamedia</a> 
    <hr>
    <p>“Seriously, how awesome is this website? I still can’t get enough...</p>
    <span class="tw_hashtag">#awesome</span> <span class="tw_hashtag">#usnews</span> 
    <a class="tw_handle">@JustinRamedia</a> 
  </div>
  
  <div class="col-md-4 col-md-offset-1 twitter_featured">
    <div><img src="//pbs.twimg.com/profile_images/600321879245717504/QNwePgJP_400x400.jpg" /></div>
    <p>“Have you guys seen my face? It's right above this sentence."</p>
    <span class="tw_hashtag">#face</span> <span class="tw_hashtag">#blackandwhite</span> 
    <a class="tw_handle">@JustinRamedia</a> 
  </div>
</section>

<section class="alerts container">
  <div class="alert alert-info alert-dismissible col-md-5" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h3><a href="#" class="alert-link">This is a link</a> for this alert, which is friendly and not scary.</h3>
  </div>
  <div class="alert alert-danger alert-dismissible col-md-5 col-md-offset-1" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h3><strong>Warning!</strong> Better check yourself, you're not looking too good.</h3>
  </div>
</section>

<section class="container">
   <div class="col-md-8">
     <div class="col-md-3">
       <a class="callout_link blue small" href="#">Learn More</a>
       <a class="callout_link white small" href="#">Learn More</a>
       <a class="callout_link red small" href="#">Learn More</a>
     </div>
     <div class="col-md-4">
       <a class="callout_link blue" href="#">Learn More</a>
       <a class="callout_link white" href="#">Learn More</a>
       <a class="callout_link red" href="#">Learn More</a>
     </div>
     <div class="col-md-4">
       <a class="callout_link blue large" href="#">Learn More</a>
       <a class="callout_link white large" href="#">Learn More</a>
       <a class="callout_link red large" href="#">Learn More</a>
     </div>
  </div>
</section>

<section>
  <br><br>
  <div class="container">
    <div class="col-md-8">
      <div role="tabpanel" class="tab_box">
      <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Tab 1</a></li>
          <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Tab 2</a></li>
          <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Tab 3</a></li>
          <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Tab 4</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut tristique quam. Quisque porta tellus nec nibh euismod dapibus. Mauris ultrices orci nec lorem elementum, tempor auctor enim blandit. Sed eget facilisis sem, sed pellentesque diam.
          </div>
          <div role="tabpanel" class="tab-pane" id="profile">
            Vestibulum egestas sed leo sit amet vestibulum. Vivamus et nunc in lectus tristique tincidunt. Duis vel convallis arcu. Fusce auctor elit eget egestas vehicula. Fusce congue congue mauris, a rutrum nisl finibus vitae. Fusce gravida convallis pellentesque. Sed in faucibus dolor.
          </div>
          <div role="tabpanel" class="tab-pane" id="messages">
            Donec ornare massa orci, quis faucibus enim convallis vel. Nam vitae mi tortor. Nullam dignissim eros vitae orci pretium ultrices. Donec mollis elit ligula,
          </div>
          <div role="tabpanel" class="tab-pane" id="settings">
            Cras ultricies tristique mollis. Cras pharetra suscipit enim, vel finibus neque consectetur ac. Vestibulum nec metus non ex rhoncus vehicula vitae a purus. Integer aliquam ultrices quam, a placerat diam luctus eget. Nulla finibus ipsum feugiat, porttitor dolor et, aliquet ante. Praesent interdum risus et nulla pulvinar, vitae condimentum metus pellentesque. Donec metus sapien, venenatis mollis sem non, porta venenatis ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac pellentesque odio, eu malesuada massa.
          </div>
        </div>
      </div>
    </div>
  </div> <!-- /container -->
</section>

<section class="fixed_footer">
  <div class="container">
    <h2>Interested in pursuing a Public Service related career?</h2>
    <a class="callout_link blue" href="#">Start Now</a>
  </div>
</section>

<section class="container">

</section> 

<section class="container">

</section> 
              
            
!

CSS

              
                @darkblue: #162454;
@lightblue: #036593;
@alertblue: #368bc2;
@red: #d12730;
@lightgrey: #d6d6d6;
@darkgrey: #4c4c4c;
@grey: #999;
@gray: @grey;
@white: #fff;

body {
  font-family: Lato, sans-serif;
}

a, body {
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

section {
  margin: 6em 0;
  clear: both;
  &.school_filter {
    background: #e7e7e7;
    padding: 1.5em;
  }
  &.fixed_footer {
    background: #fff;
    padding: .5em;
    border: 1px solid #b7b7b7;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
    margin: 0;
  }
}

// Mobile Nav
.navbar-default {
  .navbar-collapse, .navbar-header {
    background-color: @darkblue;
  }
  .navbar-toggle {
    border: none;
    float: left;
    &:hover {
      background-color: transparent;
    }
    .icon-bar {
      height: 4px;
      background-color: @lightgrey;
      &.small {
        width: 13px;
      }
      &.medium {
        width: 20px;
      }
      &.large {
        width: 25px;
      }
    }
  }
  li>a {
      font-size: 24px;
    }
}

@media (min-width: 768px) {
  .navbar-default {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    position: fixed;
    background: @darkblue;
    border: none;
    border-radius: 0;
    left: 0;
    right: 0;
    top: 0;
    height: 90px;
    z-index: 900;
    &+ section {
      margin-top: 120px;
    }
    .navbar-nav {
      li>a {
        color: white;
        padding-top: 45px;
        &:hover {
          background: transparent;
          color: @lightblue;
        }
      }
    }
    li>a {
      font-size: 14px;
      &.highlight {
        border: 1px solid @lightblue;
        padding: 5px 10px;
        margin-top: 35px;
        border-radius: 4px;
      }
      .btn-group-lg>.btn, .btn-lg {
        padding: 5px 10px;
        font-size: 15px;
        border-radius: 4px;
        background-color: transparent;
        text-transform: uppercase;
        margin-top: -4px;
      }
    }
    .nav {
      > li.dropdown.full_width {
        position: static;
        background-color: transparent !important;
        a {
          color: @lightblue;
        }
        .dropdown-menu {
          width: 100%;
          text-align: center;
          left:0;
          right:0;
          background-color: @lightblue;
          box-shadow: none;
          border: none;
          a {
            color: white;
            &:hover {
              background-color: transparent !important;
              color: @lightgrey;
            }
          }
        }
        .dropdown-menu>li {
          display: table-cell;
          a {
            padding: 0;
          }
        }
      }
    }
    .navbar-brand {
      height: auto;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transition: all 0.4s ease;
      img {
        width: 75%;
      }
    }
  }

  .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: transparent;
    color: @lightblue;
  }
}

// Section Specific
.tag {
  font-family: 'Lato', serif;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  background-color: @white;
  color: @lightblue;
  padding: 1px 10px;
}
#primary {
  font-family: 'PT Serif', serif;
  min-height: 500px;
  background: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Capitol_at_Dusk_2.jpg) no-repeat center -100px;
  background-size: cover;
  color: @white;
  padding: 150px 0 0;
  h1 {
    font-size: 2.5em;
  }
  .primary_articles {
    margin: 100px 0 50px;
    >div:hover {
      -webkit-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all .2s ease;
      color: darken(@white, 10%);
    }
    h4 {
      margin-bottom: 2px;
    }
  }
}

#primary_two_col {
  img {
    width: 100%;
  }
  .trending {
    h4 {
      color: @red;
      text-transform: uppercase;
      font-weight: bold;
      border-bottom: solid 2px @lightgrey;
      padding-bottom: 5px;
    }
    a.more {
      float: right;
      font-size: 14px;
      color: @grey;
    }
    ul {
      list-style: none;
      padding: 0;
      font-family: 'PT Serif', serif;
      font-weight: bold;
      li {
        margin: .5em 0 1.25em;
        a {
          color: @darkgrey;
          font-size: 18px;
          &:hover {
            text-decoration: none;
            border-bottom: solid 1px @grey;
          }
          span {
            font-size: 12px;
            color: @grey;
          }
        }
      }
    }
  }
}

.sidebar {
  border: 1px solid @lightgrey;
  h5 {
    color: @lightblue;
    text-transform: uppercase;
    font-weight: bold;
  }
  ul {
    list-style: none;
    padding: 0;
    li {
      margin: 5px 0; 
      a {
        color: @darkgrey;
        &:hover {
          border-bottom: solid 2px @red;
          text-decoration: none;
        }
      }
    }
  }
}

.school_filter {
  height: 80px;
  .nav-pills {
    float: right;
  }
  .nav>li>a {
    border-radius: 0;
    padding: 5px;
    margin: 0 20px;
    font-size: 18px;
    &:hover {
      background-color: transparent;
      border-bottom: solid 3px @red;
    }
  }
  select {
    background: transparent;
    border: none;
    box-shadow: none;
    &:hover {
      outline: 1px solid @darkgrey;
    }
  }
  .form-control:focus {
    box-shadow: none;
  }
}

// Social
.twitter {
  h1, h2, h3, p {
    font-family: 'PT Serif', serif;
  }
  p, span, a {
    font-size: 1.8em;
  }
  div[class^="col"]{
    border: 1px solid @lightgrey;
    padding: 60px 20px 20px;
    background: url(//eu2013.ie/media/eupresidency/content/imagegalleryitems/twitter-bird-blue-on-white-small.png) no-repeat 20px 20px;
    background-size: 20px;
    &.twitter_featured {
      background-position: center 20px;
      text-align: center;
      div:first-child {
        width: 140px;
        border-radius: 70px;
        display: block;
        margin: 2.5em auto 1.5em;
        overflow: hidden;
      }
      img {
        width: 100%;
        height: auto;
      }
    }
  }
  .tw_hashtag {
    color: @red;
  }
  .tw_handle {
    
  }
  hr {
    border: none;
    height: 4px;
    color: @lightgrey; /* old IE */
    background-color: @lightgrey; /* Modern Browsers */
  }
}

// Alerts
div[class^="alert"] {
  border: none;
  border-radius: 0;
  color: white;
}
.alerts {
  color: white;
  h1, h2, h3, h4, h5, p {
    font-family: 'PT Serif', serif;
  }
  .alert-danger {
    background-color: @red;
  }
  .alert-info {
    background-color: @alertblue;
  }
}

// Tabs
.tab_box {
  padding: 20px;
  border: 1px solid @lightgrey;
  .nav-tabs {
    border-bottom: 3px solid @lightgrey;
    &>li {
      font-size: 16px;
      text-transform: uppercase;
      margin-bottom: -3px;
      &.active>a {
        border: none;
        border-bottom: 3px solid @red;
        color: @red;
      }
      >a {
        border: none;
        border-bottom: 3px solid @lightgrey;
        &:hover {
          background-color: transparent;
          border: none;
          border-bottom: 3px solid @darkgrey;
        }
      }
    }
  }
  .tab-content {
    .tab-pane {
      font-family: 'PT Serif', serif;
      font-size: 16px;
      padding: 20px 0;
    }
  }
}

/* Modal Subscribe */
.modal {
  h1, h2 {
    font-family: 'PT Serif', serif;
  }
}
#subscribe {
  .modal-content {
    background-color: @darkblue;
    color: @white;
    text-align: center;
    padding: 20px 30px;
    border-radius: 0;
    .navbar-left {
      * {
        margin: 1em auto 1em;
      }
      float: none !important;
      .btn {
        display: block;
        margin: 0 auto;
        padding: 10px 20px;
        color: @white;
        background-color: @red;
        border: none;
        font-size: 30px;
        text-transform: uppercase;
      }
    }
    .flame_badge_fake {
      width: 100px;
      overflow: hidden;
      background: url(https://www.usnewsuniversitydirectory.com/images/forms/logo_university-directory.png) no-repeat top center;
      margin: 0 auto;
      height: 100px;
    }
    .form-group {
      width: 100%;
      .form-control {
        display: block;
        width: 100%;
        vertical-align: middle;
        padding: 30px;
        border: 2px solid @lightblue;
        background-color: transparent;
        border-radius: 0;
        font-size: 20px;
      }
    }
  }
}

// fixed footer
.fixed_footer {
  .container {
    &>* {
      float: left;
    }
    a {
      display: block;
      float: right;
    }
    h2 {
      color: @lightblue;
      font-size: 24px;
      margin: .5em 0;
    }
  }
}

// Callout Links
a {
  &.callout_link {
    border-radius: 4px;
    color: white;
    padding: 1em;
    text-transform: uppercase;
    display: inline-block;
    margin: .5em 0;
    text-decoration: none;
    text-align: center;
    &.small {
      font-size: 12px;
    }
    &.large {
      font-size: 21px;
    }
    &.blue {
      background-color: @lightblue;
      &:hover {
        background-color: lighten(@lightblue, 10%);
      }
    }
    &.white {
      background-color: @white;
      color: @darkblue;
      border: 1px solid @lightblue;
      &:hover {
        background-color: @lightblue;
        color: @white;
      }
    }
    &.red {
      background-color: @red;
      &:hover {
        background-color: lighten(@red, 10%);
      }
    }
  }
}

/* Hover Transitions */
@media (min-width: 768px) {
    li.dropdown.full_width ul.dropdown-menu {
      opacity: 0;
      display: table;
      left: -100000px;
      -webkit-transform: translate(0, 10px, 0);
      transform: translate(0, 10px, 0);
      -webkit-transition: opacity 250ms, transform 250ms, left 0ms 250ms;
      transition: opacity 250ms, transform 250ms, left 0ms 250ms;
    }

    li.dropdown.full_width:hover ul.dropdown-menu {
      opacity: 1;
      left: 0px;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      -webkit-transition: opacity 250ms, transform 250ms;
      transition: opacity 250ms, transform 250ms;
    }
}

/* Header Shrinking */
.navbar-default.small {
  .navbar-brand {
    padding: 5px 15px;
    img {
      width: 50%;
    }
  }
  .navbar-nav > li > a {
    padding-top: 20px;
  }
  .navbar-nav > li > a .btn-lg {
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
  }
}

              
            
!

JS

              
                $(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },100);
        $('#header_nav').addClass("small", 300, "easeOut");
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'90px'
        },100);
        $('#header_nav').removeClass("small", 300, "linear").addClass("large", 100, "easeOut");
      }  
  }
});
              
            
!
999px

Console