1

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.

San Jaisy
  • 15,327
  • 34
  • 171
  • 290

1 Answers1

3

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!

tao
  • 82,996
  • 16
  • 114
  • 150
  • Thanks for your answer it works . I tried to find the class for by default the drawer keep open. But not found anywhere. can you tell me how can I open the drawer . I know there is class mdl-layout--fixed-drawer which fixed the drawer. But i dont want to fixed the drawer just open on first load. – San Jaisy Feb 05 '18 at 11:31
  • @San: opening on first load is only possible with JavaScript (because opening itself happens in JS): a class is added to the drawer and an obfuscator element is added to `
    `. I updated the pen with a (commented) function that could be used to open the bar on load. It simply "clicks" the button on page load.
     – tao Jun 14 '18 at 06:15