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

问题

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

回答1:

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

Does not display a drawer button in desktop mode

Optional; goes on mdl-layout element

GitHub

回答2:

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;
    }
}

回答3:

@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).

回答4:

try the class

hide-on-large-only

回答5:

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/

来源：https://stackoverflow.com/questions/31495669/how-can-i-hide-drawer-on-large-screens-and-show-just-on-small-screens

标签

css

material-design-lite