Geek Answers Handbook

How to hide the menu of icons on large screens?

I am new to this and letting me know how to hide the menu icon, and it is automatically added without a request, I want to show only on small screens. Sorry for the bad english.

Thank.

+4
source share
6 answers

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

This is the best solution I have found thanks to the help of @dshun and @garbee.

+5
source

Another way to achieve this is to add 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>

, . , StackOverflow, : .?

+2

mdl-layout--fixed-drawer , mdl-js-layout, , , , .

+1
mdl-layout--no-desktop-drawer-button

, mdl-layout element

:

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

+1

, , :

<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>
0

div ,

hide-on-large-only
0

More articles:


All Articles