html - Different mdl-layout__drawer for large screen and small screen in MDL -
i, trying create 2 different mdl-layout__drawer small screen , large screen. per below code on small screen mdl-layout__drawer showing not showing on large screen.
<div class="mdl-layout__drawer mdl-layout--large-screen-only"> <span class="mdl-layout-title"><img src="~/images/transfetebirdlogo.png" width="80" height="80" /></span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">link21</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> <div class="mdl-layout__drawer mdl-layout--small-screen-only"> <span class="mdl-layout-title"><img src="~/images/transfetebirdlogo.png" width="80" height="80" /></span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">link11</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>
can tell me wrong in code. how can solve issue.
your whole code should wrapped in div containing mdl-layout
, mdl-js-layout
, mdl-layout--fixed-drawer
classes. last 1 responsible showing navigation menu in large screens. pen here.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer"> <div class="mdl-layout__drawer mdl-layout--large-screen-only"> <span class="mdl-layout-title"><img src="~/images/transfetebirdlogo.png" width="80" height="80" /></span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">link21</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> <div class="mdl-layout__drawer mdl-layout--small-screen-only"> <span class="mdl-layout-title"><img src="~/images/transfetebirdlogo.png" width="80" height="80" /></span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">link11</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> </div>
Comments
Post a Comment