w
Note: If you want your navbar change the color after scrolling set the color to class
<nav class="navbar default-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-light" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#" class="waves-effect waves-light">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#" class="waves-effect waves-light">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</nav>
Changing colors
You can easily change the color of the navbar (and every other element in our Framework) by adding a color class.
Example:
<nav class="navbar red">
All color references you can find on page MDB Colors
Changing color of the bottom border in focus text field
Change the color of bottom border within css file of your project, by edditing border-bottom color property.
input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #fff;
}
Fixed scrolling navbar
<!--Navigation-->
<nav class="navbar navbar-fixed-top z-depth-1" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-light" href="#">MDBootstrap</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#" class="waves-effect waves-light">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#" class="waves-effect waves-light">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</nav>
<!--/.Navigation-->
Note: If you want your navbar change the color after scrolling set the color to class .top-nav-collapse
Example:
.top-nav-collapse {
background-color: #3F729B !important;
}
<!--Remember to set navbar color for mobile devices-->
@media only screen and (max-width: 768px) {
.navbar {
background-color: #3F729B !important;
}
}
To change the color you can use one of 300 prepared color classes. All color references you can find on page MDB Full Palette
Double navigation
<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="navbar-brand button-collapse"><i class="material-icons">menu</i></a>
<!--/. SideNav slide-out button -->
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav admin-side-nav dark-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<img src="http://0.gravatar.com/avatar/60efa32c26a19f3ed2e42798afb705ba?s=100&d=mm&r=g" class="img-responsive img-circle">
<div class="rgba-stylish-strong">
<p class="user white-text">Admin
<br> admin@gmail.com
</p>
</div>
</div>
<!--/. Logo -->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a href="#intro" class="waves-effect waves-light"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#" class="waves-effect waves-light"><i class="fa fa-money"></i> Sales</a></li>
<li><a href="#" class="waves-effect waves-light"><i class="fa fa-line-chart"></i> Conversion</a></li>
<li><a href="#" class="waves-effect waves-light"><i class="fa fa-users"></i> Website Traffic</a></li>
<li><a href="#" class="waves-effect waves-light"><i class="fa fa-search"></i> SEO</a></li>
<li><a href="#" class="waves-effect waves-light"><i class="fa fa-share-alt"></i> Social</a></li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="double-navbar navbar navbar-fixed-top unique-color z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header pull-left">
<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
<!--/. SideNav slide-out button -->
</div>
<!-- Navbar Icons -->
<ul class="list-inline pull-right text-center">
<li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-question"></i><br><span>Help</span></a></li>
<li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-cogs"></i><br><span>Settings</span></a></li>
<li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-sign-out"></i><br><span>Logout</span></a></li>
</ul>
<!--/. Navbar Icons -->
</div>
</nav>
<!--/.Navbar-->
Note: To use Double Navigation (top Navbar + Side Menu) you need to initialize Side Menu in your project with following code:
<script>
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible
$('.collapsible').collapsible();
</script>