Search code examples
csshtmlmaterial-designangular2-mdl

Material design Lite navigation drawer like google Android and You Tube

I, am using Material design lite in my website. Their are many templates that works great. I, want to change little bit design for navigation drawer. Here is the template I am using for dashboard

https://getmdl.io/components/index.html#layout-section

In this design the navigation drawer is overlap to the nab bar. I want the design to be like google official android website and you tube.

Here is the design from the android and you tube

you tube website

android website design

Here is the my design

my website design

Here is the code for the template.

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <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">Title</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>

Can anyone please let me know how can I design the navigation drawer like android and you tube.

Solution

  • This should do it:

    .mdl-layout--fixed-header>.mdl-layout__header {
  z-index: 6;
}

.has-drawer .mdl-layout__drawer {
  padding-top: 64px;
}

.mdl-layout--fixed-drawer:not(.is-small-screen)>.mdl-layout__header {
  padding-left: 240px;
  margin-left: 0;
  width: 100%;
}

    Demo: https://codepen.io/andrei-gheorghiu/pen/XZdQpo

    Note: there might be some classes for it, but for me it was easier to provide the CSS than search through docs and example. In the end, researching before asking should have been your task, not mine.

    Cheers!