Materialize CSS navbar is used to create a navigation bar. It consists of mainly two parts such as a logo or brand link and
Navigation link can be placed right side of the navbar easily by placing the .right
class to the <ul>
element base class.
<ul class="right"></ul>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<img src="../../images/logo.png" width="60" height="60" alt="Brand Logo">
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!">HTML5 </a></li>
<li><a href="#!">CSS3 </a></li>
<li><a href="#!">Material Design</a></li>
</ul>
</div>
</nav>
To place the navigation link on the left side of the navbar, add the .left
class to the <ul>
element base class.
<ul class="left"> </ul>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo right">Logo</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
To center the brand logo, just add the .center
class to the logo container i.e <a>
element base class having class .brand-logo
.
<a href="#" class="brand-logo center">
<img src="..." alt="center the image">
</a>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo center">
<img src="" width="270" height="60" alt="Logo">
</a>
<ul id="nav-mobile" class="hide-on-med-and-down">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Services</a></li>
</ul>
</div>
</nav>
To create an active link, use .active
class in the child element i.e (<li>
) base class.
<ul>
<li class="active"></li>
</ul>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Logo</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li class="active"><a href="#">JavaScript</a></li>
</ul>
</div>
</nav>
To create a fixed navbar, add an outer wrapper div
and assign it .navbar-fixed
class.This will offset your other content while making your nav fixed.
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper"></div>
</nav>
</div>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
</ul>
</div>
</nav>
</div>