Various mdl-layout__drawer for large screen and small screen in MDL

Question

I am trying to create two different mdl-layout__drawer for small screen and big screen. According to the code below, only on a small screen, mdl-layout__drawer indicates that it is not displayed on a large screen.

<div class="mdl-layout__drawer mdl-layout--large-screen-only">
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link21</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>

    <div class="mdl-layout__drawer mdl-layout--small-screen-only">
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link11</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>

Can someone tell me what is wrong in the code. How can I solve this problem.

Answer 1

All your code should be wrapped in a div containing the classes mdl-layout, mdl-js-layoutand mdl-layout--fixed-drawer. The latter is responsible for displaying the navigation menu on large screens. Pen is here .

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <div class="mdl-layout__drawer mdl-layout--large-screen-only">
    <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link21</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>

  <div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link11</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>
</div>