How can I always display the menu icon on navbar materializecss? Like when clicked, the drawer appears and hides vice versa.
Html:
<nav class="default" role="navigation">
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Brand</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Login</a></li>
<li><a class="waves-effect red waves-light btn">Sign up</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">Login</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</nav>
JS:
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
}
);
At line,
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
, add one more class .show-on-large
.
jsfiddle
For more info : Full Screen HTML Structure
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With