Materialize Header Navbar Template (With Sass)

index.html

    <header class="main-header">
      <nav class="transparent z-depth-0">
        <div class="nav-wrapper">
          <a
            href="#"
            data-activates="mobile-nav"
            class="button-collapse show-on-large"
          >
            <i class="material-icons">menu</i>
          </a>
          <a href="index.html" class="brand-logo">Galappear</a>
          <ul class="right hide-on-med-and-down">
            <li class="active">
              <a href="index.html">Abstract</a>
            </li>
            <li>
              <a href="logos.html">Logos</a>
            </li>
            <li>
              <a href="gaming.html">Gaming</a>
            </li>
          </ul>
        </div>
        <ul class="side-nav" id="mobile-nav">
          <li>
            <a href="index.html">Abstract</a>
          </li>
          <li>
            <a href="logos.html">Logos</a>
          </li>
          <li>
            <a href="gaming.html">Gaming</a>
          </li>
        </ul>
      </nav>
      <h1 class="center">I Do Graphic Design</h1>
      <h4 class="center">Mark Odayan</h4>
    </header>

main.scss

@import './materialize';

// Header
$header-bg: url(../img/pattern.png);
$header-height: 300px;
$primary: teal;

.main-header {
  background: $header-bg;
  color: #fff;
  height: $header-height;
  margin-bottom: 30px;

  h1 {
    margin: 0;
    padding-top: 30px;
  }
}