Since Google’s design team released Material Design Lite, I’ve been working hard on learning and understanding it. I’ve created several experiments using Material Design Lite and have been liking it thus far.Today, I thought I should start re-creating pieces my website in Material Design Lite; since I currently use Twitter’s Bootstrap front-end framework. It creates useful tutorials and may lead to my website possibly being in Material Design Lite in the future.

We will start with creating a custom header navigation.

This is what we are trying to achieve:

See the Pen Material Design Lite: Header and Navigation by Brandon Himpfen (@brandonhimpfen) on CodePen.

HTML

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="custom-header mdl-layout__header mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Brandon Himpfen</span>
            <div class="mdl-layout-spacer"></div>
            <nav class="mdl-navigation mdl-layout--large-screen-only">
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
            </nav>
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Sidebar Menu</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
    </main>
</div>

There are two navigations within the header. The navigation found in the mdl-layoutheader-row controls the navbar navigation, whereas, everything in mdl-layoutdrawer controls the sidebar navigation.

Also, what is important to note, that we’ve added custom-header to the opening header HTML tag; we did this so we can customize it using CSS.

CSS

Style the navbar navigation:

header.custom-header {
  background: #111;
}

Navbar navigation title:

.mdl-layout__header-row span.mdl-layout-title {
  color: #ffb648;
  text-transform: uppercase;
}

Style material design icons:

.custom-header .material-icons {
  color: #fff;
}

Style navbar navigation links:

.custom-header a.mdl-navigation__link {
  color: #eee;
  font-weight: 700;
  font-size: 14px;
}
.custom-header a.mdl-navigation__link:hover {
  color: #fff;
}

Style the sidebar navigation title:

.mdl-layout__drawer span.mdl-layout-title {
  background: #111;
  color: #ffb648;
}

Style the sidebar navigation links:

.mdl-layout__drawer a.mdl-navigation__link {
  color: #eee;
  font-weight: 700;
  font-size: 14px;
}
.mdl-layout__drawer a.mdl-navigation__link:hover {
  color: #000;
}

Well, not included in this tutorial, you could customize the background colour of the sidebar navigation, like so:

.mdl-layout .mdl-layout__drawer{
  background: #111;
}