<div class="child-webnodes-list">
          <nav class="nav">
      <ul>
          <li class="child-webnode">
            Groente en Fruit          
          </li>
          <li class="child-webnode">
            Groente en Fruit          
          </li>
        <li class="child-webnode">
            Groente en Fruit          
          </li>
        <li class="child-webnode">
            Groente en Fruit          
          </li>
        <li class="child-webnode">
            Groente en Fruit          
          </li>
        <li class="child-webnode">
            Groente en Fruit          
          </li>
      </ul></nav>
        </div>

.child-webnodes-list {
    max-width: 500px;
    margin: 0 auto;
    border: black 1px solid;
    position: relative;  
}

.child-webnodes-list:after {
    content: "";
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);
    width: 100px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
}

.nav {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

ul {
    list-style: none;
    white-space: nowrap;
    padding-left: 0;
    font-size: 20px;
}

.child-webnode {
    display: inline-block;
    margin-right: 20px;
}