Materialize CSS Navbar
Materialize CSS navbar is used to create a navigation bar. It consists of mainly two parts such as a logo or brand link and
Right Aligned Links
Navigation link can be placed right side of the navbar easily by placing the .right class to the <ul> element base class.
General Syntax
<ul class="right"></ul> Source Code
Download<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> Source Code : Output
Left Aligned Links
To place the navigation link on the left side of the navbar, add the .left class to the <ul> element base class.
General Syntax
<ul class="left"> </ul> Source Code
Download<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> Source Code : Output
Centering the logo
To center the brand logo, just add the .center class to the logo container i.e <a> element base class having class .brand-logo.
General Syntax
<a href="#" class="brand-logo center">
<img src="..." alt="center the image">
</a> Source Code
Download<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> Source Code : Output
Active Items
To create an active link, use .active class in the child element i.e (<li>) base class.
General Syntax
<ul>
<li class="active"></li>
</ul> Source Code
Download<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> Source Code : Output
Fixed Navbar
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.
General Syntax
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper"></div>
</nav>
</div> Source Code
Download<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> Source Code : Output
×
![Modal Image]()