How to do that when using MDL divs are located under the site menu?

<div class="content-grid mdl-grid"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Leniva</span> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="bemmdl.html">Home</a> <a class="mdl-navigation__link" href="bemmdl2.html">Blog</a> <a class="mdl-navigation__link" href="bemmdl3.html">About</a> <a class="mdl-navigation__link" href="bemmdl4.html">Contact</a> </nav> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" id="search-expandable" /> <label class="mdl-textfield__label" for="search-expandable">Search text</label> </div> </div> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Leniva</span> <nav class="mdl-navigation"> <a href="#" class="mdl-navigation__link">Products</a> <a href="#" class="mdl-navigation__link">Services</a> <a href="#" class="mdl-navigation__link">Portfolios</a> <a href="#" class="mdl-navigation__link">Achievements</a> <a href="#" class="mdl-navigation__link">Blog</a> </nav> </div> </div> <div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone"> </div> <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone"> </div> <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone"> </div> </div>

    1 answer 1

    Wrapped in blocks under the menu in mdl-layout__content :

     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script> <div class="content-grid mdl-grid"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Leniva</span> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="bemmdl.html">Home</a> <a class="mdl-navigation__link" href="bemmdl2.html">Blog</a> <a class="mdl-navigation__link" href="bemmdl3.html">About</a> <a class="mdl-navigation__link" href="bemmdl4.html">Contact</a> </nav> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" id="search-expandable" /> <label class="mdl-textfield__label" for="search-expandable">Search text</label> </div> </div> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Leniva</span> <nav class="mdl-navigation"> <a href="#" class="mdl-navigation__link">Products</a> <a href="#" class="mdl-navigation__link">Services</a> <a href="#" class="mdl-navigation__link">Portfolios</a> <a href="#" class="mdl-navigation__link">Achievements</a> <a href="#" class="mdl-navigation__link">Blog</a> </nav> </div> <div class="mdl-layout__content"> <div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone"> mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone </div> <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone"> mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone </div> <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone"> mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone </div> </div> </div> </div>

    • Just wrapped blocks submenu, nothing has changed. Having looked at why it works for you, but I don’t find that these blocks under the menu are located in a block. Mdl-layout mdl-js-layout mdl-layout - fixed-header. So they belong to a fixed header? Is there any other way? - Dmitrii Lenivec
    • It's funny that everything works without a wrapper for the blocks under the mdl-layout__content menu, if the blocks under the menu are wrapped in the aforementioned mdl-layout mdl-js-layout mdl-layout - fixed-header. - Dmitrii Lenivec
    • "they sit in the block.mdl-layout mdl-js-layout mdl-layout - fixed-header. That is, they refer to the fixed header" - as I understood mdl-layout--fixed-header. - means a block with a fixed cap - it means you need to indent the height of the menu at the top. But it does not mean the fixed cap itself. Without it, all the blocks that follow the cap will climb under it, will not be visible. There is no other way. - HamSter
    • Regarding the second, that without `mdl-layout__content works. Yes it works, but it’s not exactly the right structure, if you use the framework, that’s right. - HamSter