Horizontally Scrolling Tabs With No Scrollbar

Question

I have a navigation bar with different tabs based on Materialize CSS (http://materializecss.com/tabs.html). I have more tabs than fit the width of the browser window so it automatically generates a horizontal scrollbar. This is unsightly for modern websites so I am looking for a way to hide it but still allow scrolling.

Other comments on SO have mentioned using positioning for nested divs, however, I can't seem to get this to work in this scenario, so I was wondering if anyone could point out what I am doing wrong?

Below is a codepen of my code so far: http://codepen.io/anon/pen/LGvQRP

Here is the code:

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
</div>

And the javascript:

$(document).ready(function(){
    $('ul.tabs').tabs();
});

Additionally, I would want to extend it so that the selected tab is always in the middle and the scroll would be infinite with it restarting after all options are exhausted. Does anyone have any hints on this?

Answer 1

Try:

<ul class="tabs" style="overflow-x: hidden">