Materialize CSS heade tabs

index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper grey darken-2">
      <a href="#!" class="brand-logo left hide-on-small-only">Logo</a>
      <div class="col s6 right tab-nav">
        <ul class="tabs grey darken-2">
          <li class="tab col s2"><a href="#test1" class="active">Tab 1</a></li>
          <li class="tab col s2"><a href="#test2">Tab 2</a></li>
          <li class="tab col s2"><a href="#test3">Tab 3</a></li>
          <li class="tab col s2"><a href="#test4">Tab 4</a></li>
        </ul>
      </div>
  </nav>
  </div>
  <div class="container" id="tabs">
    <div id="test1" class="col s12">
      <h1 class="center light">Tab 1 header</h1>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
      <div class="row">
        <div class="col s12 m6">
          <div class="card grey lighten-3 hoverable">
            <div class="card-content grey-text text-darken-4">
              <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="card grey lighten-3 hoverable">
            <div class="card-content grey-text text-darken-4">
              <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
      </div>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
    </div>
    <div id="test2" class="col s12">
      <h1 class="center light">Tab 2 header</h1>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
    </div>
    <div id="test3" class="col s12">
      <h1 class="center light">Tab 3 header</h1>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
    </div>
    <div id="test4" class="col s12">
      <h1 class="center light">Tab 4 header</h1>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
      <p>In hac habitasse platea dictumst. Maecenas nec odio et ante tincidunt tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id,
        nulla. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum fringilla pede sit amet augue. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Phasellus gravida semper nisi.</p>
    </div>
  </div>

main.js

(function($) {
  $(function() {

    $('ul.tabs').tabs();

  }); //end of document ready
})(iQuery); // End of namespace

style.css

#tabs {
  margin-top: 60px;
}

.tab-nav{
  height: 64px;
}

.hide-tab-scrollbar{
  margin-top: 15px;
}

.tabs .tab a {
  color: #fff;
}

.tabs .tab a:hover {
  color: #81c784;
}

.tabs .indicator {
  background-color: #81c784;
}

@media only screen and (min-width: 993px) {
  .container {
    width: 90%;
  }
}

@media only screen and (min-width: 601px) {
  .container {
    width: 90%;
  }
}

@media only screen and (min-width: 302px) {
  .container {
    width: 90%;
  }
  .nav-wrapper{
    height: 64px !important;
  }
}