How can I hide drawer on large screens and show just on small screens.?

Question

Even though I add "mdl-layout--small-screen-only" class on the drawer, the hamburger image still appears on large screens.

<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>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <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>

All I need is hiding drawer including the icon on navbar while on large screens. Thanks

I just tried your code ( adding 'mdl-layout--small-screen-only') because I'm having the same issue and it works fine. — rsano, Aug 15 '15 at 11:23
@rsano is right. All you need to do is add "mdl-layout--small-screen-only" https://github.com/google/material-design-lite/blob/master/src/layout/layout.js#L126 I made a jsfiddle so you can see it working. https://jsfiddle.net/michaelguild/uj824wdv/17/embedded/result/ — Michael Guild, Dec 25 '15 at 20:51

score 11 · Answer 1 · answered Apr 03 '16 at 11:18

11

mdl-layout--no-desktop-drawer-button

Does not display a drawer button in desktop mode

Optional; goes on mdl-layout element

GitHub

answered Apr 03 '16 at 11:18

fastec

907
1
8
18

1

That's cool! Is there also somethong like `mdl-layout--no-tablet-drawer-button`? – Benny Code Jul 12 '16 at 18:12
Seems like there is no such an option, but maybe I'm wrong. – fastec Jul 13 '16 at 15:16

score 1 · Answer 2 · answered Aug 23 '17 at 13:37

1

Add the following to your css. This hides on the screens less than 1024px width

@media screen and (min-width: 1024px) {
    .mdl-layout__drawer-button {
        display: none;
    }
}

answered Aug 23 '17 at 13:37

score 0 · Answer 3 · answered Jul 18 '15 at 21:57

0

@media screen and (min-width: 992px) {
    .mdl-layout__drawer {
        display: none;
    }
}

P.S. Have no idea what is .mdl-layout--small-screen-only looks like some BEMish framework/library for something. Probably media queries are not in the correct order or you have some faily setup or whatever. I'm not a telepath. Have never been though I tried. Possly things change in some future (distant or near).

answered Jul 18 '15 at 21:57

knitevision

3,023
6
29
44

2

`.mdl-layout--small-screen-only` "Hides an element on larger screens", It's in the [layout documentation](https://github.com/google/material-design-lite/tree/master/src/layout) – 3lil636wm Mar 02 '16 at 09:16

score 0 · Answer 4 · answered Sep 13 '16 at 15:20

0

try the class

hide-on-large-only

answered Sep 13 '16 at 15:20

VISHNU

948
8
15

score -1 · Answer 5 · answered Jul 25 '15 at 17:59

-1

Replace the

mdl-layout--small-screen-only

With a

mdl-cell--hide-desktop

Presto.

See here: http://mdlhut.com/2015/07/mdl-displaying-content-for-specific-viewports/

answered Jul 25 '15 at 17:59

David

557
4
15

mdl needs to iron out their responsive/media query classes. After looking at the js, it looks like "mdl-layout--small-screen-only" is exactly what it's looking for. https://github.com/google/material-design-lite/blob/master/src/layout/layout.js#L126 – Michael Guild Dec 25 '15 at 20:54
1

mdl-cell--hide-desktop is for use with divs using the mdl-cell class. – Mieczysław Daniel Dyba Feb 06 '16 at 04:17

How can I hide drawer on large screens and show just on small screens.?

5 Answers5

Linked