6

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.

Juan Henriquez
  • 131
  • 1
  • 4
  • no need to worry about the english. can you define large screen? Anyway, you can definitely detect screen size. For example, using jquery,$(window).height(); $(document).height(); $(window).width(); $(document).width(); – dshun Jul 12 '15 at 03:33
  • sorry, the little code i added in the comments looks ugly. but anyway, refer to this http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window, to see how you can get the screen size then show / hide your menu accordingly – dshun Jul 12 '15 at 03:35
  • @dshun If the question is not tagged with jQuery or asking directly for jQuery it is best to not provide a jQuery solution. The solution is available directly from MDL without any extra stuff being pulled in. – Garbee Jul 13 '15 at 00:05

6 Answers6

5

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.

Juan Henriquez
  • 131
  • 1
  • 4
3

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.?

Community
  • 1
  • 1
Derjyn
  • 156
  • 5
  • Can you please answer the question post in this link - https://stackoverflow.com/questions/45754638/different-mdl-layout-drawer-for-large-screen-and-small-screen-in-mdl – San Jaisy Aug 21 '17 at 02:03
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">

iamsankalp89
  • 4,607
  • 2
  • 15
  • 36
serdigo
  • 31
  • 1
1

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.

Garbee
  • 10,581
  • 5
  • 38
  • 41
0

The effective solution I found and that finaly works is : 

<style>
       @media screen and (min-width: 992px) {
        .mdl-layout__drawer-button {
            /* Hide the Hamburger button but will leave an unused space */
            display: none;
        }
        .mdl-layout__header-row {
            /* so important to make sure the Hamburger button didn't leave an unused space */
            padding-left: 24px !important; 
        }
    }
</style>
AndroLife
  • 908
  • 2
  • 11
  • 27
0

To hide div in large screen please add this class 

hide-on-large-only
VISHNU
  • 948
  • 8
  • 15