Materialize CSS | Navbar
Materialize CSS | navbar is completely supported HTML nav tag.It has basically two parts. The first part contains the brand logo or brand link and the second one denotes navigation links. These navigation links can be placed either left or right.
Right Aligned Links
To place nav link right side of the navbar, add .right class to the <ul> element base class.
General Syntax
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<img src="../images/logo.png" width="70" height="60" alt="Brand Logo" />
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!">Nav Link</a></li>
</ul>
</div>
</nav>
Source Code
<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 nav link left side of the navbar, assign .left class to the <ul> element base class.
General Syntax
<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="#">Nav Link</a></li>
</ul>
</div>
</nav>
Source Code
<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="#">PHP</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</nav>
Source Code: Output
Centering the logo
To center the brand logo, just add the .center class to the element base class having class .brand-logo.
General Syntax
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo center">
<img src="../images/logo.png" width="60" height="60" alt="Brand Logo" />
</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="#!">Nav Link</a></li>
</ul>
</div>
</nav>
Source Code
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo center">
<img src="../images/logo.png" width="60" height="60" alt="Brand 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><a href="#!">Material Design</a></li>
</ul>
</div>
</nav>
Source Code: Output
Active Navbar Link
To create active link item assign .active class to the child element(<li>) base class.
General Syntax
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Logo</a>
<ul class="left hide-on-med-and-down">
<li class="active"><a href="#">Materialize CSS</a></li>
</ul>
</div>
</nav>
Source Code
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Logo</a>
<ul class="left hide-on-med-and-down">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li class="active"><a href="#">Materialize CSS</a></li>
</ul>
</div>
</nav>
Source Code: Output
Fixed Navbar
To create a fixed navbar, just add an out wrapper div having class .navbar-fixed.
Source Code
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">
<img src="../images/logo.png" width="70" height="60" alt="Brand Logo" />
</a>
<ul class="right hide-on-med-and-down">
<li><a href="#!">HTML5</a></li>
<li><a href="#!">CSS3</a></li>
<li><a href="#!">Javascript</a></li>
</ul>
</div>
</nav>
</div>
Web Tutorials
