Materialize CSS | Navbar
Materialize CSS | navbar is supported HTML nav tag. The navbar in Materialize consists of two parts. The first part contains the materialize CSS logo or brand link, and the second one denotes navigation links. These navigation links can be placed either left or right of the materialize navbar.
Right Aligned Links
To place a navigation link on the right side of the navbar, add the .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 on the left side of the navbar, assign .left class to the unordered list (<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 place the materialize logo in the center of the navigation menu, add .center class to the brand logo container having .brand-logo class .
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
You can make an active link inside the navigation menu by adding the .active class to the navbar item's (<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
If you want to make the fixed navbar in materialize, then place the navbar inside the external wrapper (<div>) and add .navbar-fixed class to it. This will offset your other content while having your nav fixed. You can adjust the height of this outer div to change how much offset there is in your content.
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
