nav.navbar 
  ul.navbar__list
    li.navbar__item
      a.navbar__link(href) Navigation 1
    li.navbar__item
      a.navbar__link(href) Navigation 2
    li.navbar__item
      a.navbar__link(href) Navigation 3
    li.navbar__item
      a.navbar__link(href) Navigation 4
    li.navbar__item
      a.navbar__link(href) Navigation 5
    li.navbar__item
      a.navbar__link(href) Navigation 6
View Compiled
body 
  padding 2rem

.navbar
  margin-left auto 
  margin-right auto
  max-width 600px
  position relative
  
  &:after 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
    content ''
    height 100%
    position absolute 
    right 0 
    top 0
    width 2rem
  
  &__list
    -webkit-overflow-scrolling touch
    list-style none
    overflow-x auto
    padding 1rem 0
    white-space nowrap 
  
  &__item 
    display inline-block 
    
    &:not(:last-child)
      margin-right 1rem
      
    &:last-child 
      margin-right 2rem
  
  &__link 
    border solid 1px tomato
    color #222
    display block 
    padding 1rem
    text-decoration none
    
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.