How to hide the icon menu on large screens?

Question

I'm new at this and let me know how to hide the menu icon , and it adds automatically without being prompted, i want only to display on small screens. Sorry for the bad English.

Thank You.

Answer 1

I had to resort to a Media Query to solve my problem.

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

It is the best solution I've found, thanks to @dshun and @garbee for help.

Answer 2

Another way of achieving this, is to add the various screen size classes, such as

mdl-layout--small-screen-only

. Here is an example:

<div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title">Drawer Title</span>

    <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link 1</a>
        <a class="mdl-navigation__link" href="">Link 2</a>
        <a class="mdl-navigation__link" href="">Link 3</a>
    </nav>
</div>

My apologies if that snippet doesn't work well for you. I just noticed a similar question here on StackOverflow, the solution there may be more proper: How can I hide drawer on large screens and show just on small screens.?

Answer 3

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

Does not display a drawer button in desktop mode, goes on mdl-layout element

Here is an example of the same:

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">

Answer 4

You can use the mdl-layout--fixed-drawer on the same element you use mdl-js-layout to get a fixed drawer on desktop which should remove the button to view it and leave it open all the time for access.