nav.navbar
  button.navbar-btn 
    | ☰
    span.sr-only Menu
  
  .navbar-inner
    ul.nav 
      li.nav-item
        a.nav-link(href='#') Home
      li.nav-item
        a.nav-link(href='#') About
      li.nav-item
        a.nav-link(href='#') Blog
      li.nav-item
        a.nav-link(href='#') Contact
View Compiled
//  
// 1. Spaces 
// 2. Media Queries 
// 3. Screen Reader Only
// 4. Reset list styles
// 5. Navbar
//
// --------------------------------------------------
 
// 
// 1. Spaces 
// --------------------------------------------------

$space    = 20px         // Regular space margin 
$space-xs = ($space / 4) // Extra small space margin
$space-sm = ($space / 2) // Small space margin
$space-md = ($space * 2) // Medium space margin
$space-lg = ($space * 4) // Large space margin


// 
// 2. Media Queries 
// --------------------------------------------------
  
$screen-xs   = 480px  // Extra small screen / phone   
$screen-sm   = 768px  // Small screen / tablet   
$screen-md   = 992px  // Medium screen / desktop   
$screen-lg   = 1200px // Large screen / wide desktop  
$screen-xlg  = 1600px // Extra Large screen / wide desktop 
$screen-xxlg = 1900px // Extra Large screen / wide desktop 

// So media queries don't overlap when required, provide a maximum
$screen-xs-max  = ($screen-sm   - 1)
$screen-sm-max  = ($screen-md   - 1)
$screen-md-max  = ($screen-lg   - 1)
$screen-lg-max  = ($screen-xlg  - 1)
$screen-xlg-max = ($screen-xxlg - 1)


//
// 3. Screen Reader Only 
// --------------------------------------------------

.sr-only
  position absolute 
  width 1px 
  height 1px 
  padding 0 
  margin -1px 
  overflow hidden 
  clip rect(0,0,0,0) 
  border 0  

  
//
// 4. Reset list styles
// --------------------------------------------------

$list-unstyled 
  margin-bottom 0
  padding-left 0
  list-style none
  
  
//
// 5. Navbar
// --------------------------------------------------
 
.navbar-btn
  display none
  
  
.navbar-inner
   background #222 
   padding $space-sm
   text-align center
    
   
.nav 
  @extends $list-unstyled 
  display inline-block
  margin-top 0
  
  
 .nav-item
   display inline-block
  
   
 .nav-link
   border-right solid 1px #aaa
   color #fff
   display block
   min-width 60px
   padding $space
   text-align center
   text-decoration none
   transition background .3s
   
   .nav-item:first-child &
      border-left solid 1px #aaa
   
   &:hover,
   &:focus 
     background #333
   
  
View Compiled
$('.navbar-btn').on('click', function() {
  $('.navbar-inner').toggleClass('in');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js