This section is part of the premium version of the MDB framework.
Learn more
Navigation on the left is a live demo of SideNav.
Take a look at the gif below to see in action a mobile version of SideNav
You can also use the following variations:
Default SideNav
Personal SideNav
Admin SideNav
Drag-out menu
Initialization
Before using SideNavigation, you have to initialize it in your project by using code below.
<script>
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
</script>
Customization
<script>
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
edge: 'right', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
}
);
</script>
Slide-out Button
<a href="#" data-activates="slide-out" class="navbar-brand button-collapse"><i class="material-icons">menu</i></a>
Dropdown HTML Structure
<!-- 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">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#"><img src="img/df.png" class="img-responsive"></a>
</div>
<!--/. Logo -->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="bold collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="bold collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="bold collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Fixed HTML Structure
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="navbar-brand button-collapse"><i class="material-icons">menu</i></a>
If you are planning on using this you will have to offset your content by the width of the side menu. Place the padding on where the offset content will be, which in our case is in header, main and footer.
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
Default SideNav
Light Variation
Live Demo
<!-- 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 fixed default-side-nav light-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#"><img src="https://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-responsive"></a>
</div>
<!--/. Logo -->
<!--Search Form-->
<form class="search-from input-light-bg" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<!--/.Search Form-->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Link</a>
</li>
<li><a href="#" class="waves-effect">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Link</a>
</li>
<li><a href="#" class="waves-effect">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Link</a>
</li>
<li><a href="#" class="waves-effect">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Dark Variation
Live Demo
<!-- 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 fixed default-side-nav dark-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#"><img src="https://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-responsive"></a>
</div>
<!--/. Logo -->
<!--Search Form-->
<form class="search-from input-dark-bg" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<!--/.Search Form-->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Colorful Variation
Live Demo
<!-- 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 fixed default-side-nav colorful-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#"><img src="https://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-responsive"></a>
</div>
<!--/. Logo -->
<!--Search Form-->
<form class="search-from input-dark-bg" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<!--/.Search Form-->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Stylish Variation
Live Demo
<!-- 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 fixed default-side-nav stylish-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#"><img src="https://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-responsive"></a>
</div>
<!--/. Logo -->
<!--Search Form-->
<form class="search-from input-dark-bg" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<!--/.Search Form-->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Personal SideNav
Light Variation
Live Demo
<!-- 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 fixed personal-side-nav light-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#">
<div class="avatar-wrapper">
<img src="http://0.gravatar.com/avatar/60efa32c26a19f3ed2e42798afb705ba?s=100&d=mm&r=g" class="img-responsive img-circle">
</div>
</a>
</div>
<!--/. Logo -->
<!--About-->
<div class="about">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<!--/.About-->
<!--Social-->
<ul class="social list-inline text-center">
<li class="waves-effect waves-light"><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a></li>
</ul>
<!--/.Social-->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Link</a>
</li>
<li><a href="#" class="waves-effect">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Link</a>
</li>
<li><a href="#" class="waves-effect">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Link</a>
</li>
<li><a href="#" class="waves-effect">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Dark Variation
Live Demo
<!-- 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 fixed personal-side-nav dark-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#">
<div class="avatar-wrapper">
<img src="http://0.gravatar.com/avatar/60efa32c26a19f3ed2e42798afb705ba?s=100&d=mm&r=g" class="img-responsive img-circle">
</div>
</a>
</div>
<!--/. Logo -->
<!--About-->
<div class="about">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<!--/.About-->
<!--Social-->
<ul class="social list-inline text-center">
<li class="waves-effect waves-light"><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a></li>
</ul>
<!--/.Social-->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Colorful Variation
Live Demo
<!-- 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 fixed personal-side-nav colorful-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#">
<div class="avatar-wrapper">
<img src="http://0.gravatar.com/avatar/60efa32c26a19f3ed2e42798afb705ba?s=100&d=mm&r=g" class="img-responsive img-circle">
</div>
</a>
</div>
<!--/. Logo -->
<!--About-->
<div class="about">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<!--/.About-->
<!--Social-->
<ul class="social list-inline text-center">
<li class="waves-effect waves-light"><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a></li>
</ul>
<!--/.Social-->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Stylish Variation
Live Demo
<!-- 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 fixed personal-side-nav stylish-side-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#">
<div class="avatar-wrapper">
<img src="http://0.gravatar.com/avatar/60efa32c26a19f3ed2e42798afb705ba?s=100&d=mm&r=g" class="img-responsive img-circle">
</div>
</a>
</div>
<!--/. Logo -->
<!--About-->
<div class="about">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<!--/.About-->
<!--Social-->
<ul class="social list-inline text-center">
<li class="waves-effect waves-light"><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li class="waves-effect waves-light"><a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a></li>
</ul>
<!--/.Social-->
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect waves-light">Click me</a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
<li><a href="#" class="waves-effect waves-light">Link</a>
</li>
</ul>
</div>
</li>
</ul>
<!--/. Side navigation links -->
Admin SideNav
Light Variation
Live Demo
<!-- 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 fixed admin-side-nav light-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="#" class="waves-effect"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#" class="waves-effect"><i class="fa fa-money"></i> Sales</a></li>
<li><a href="#" class="waves-effect"><i class="fa fa-line-chart"></i> Conversion</a></li>
<li><a href="#" class="waves-effect"><i class="fa fa-users"></i> Website Traffic</a></li>
<li><a href="#" class="waves-effect"><i class="fa fa-search"></i> SEO</a></li>
<li><a href="#" class="waves-effect"><i class="fa fa-share-alt"></i> Social</a></li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
Dark Variation
Live Demo
<!-- 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 fixed 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 -->
Colorful Variation
Live Demo
<!-- 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 fixed admin-side-nav colorful-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 -->
Stylish Variation
Live Demo
<!-- 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 fixed admin-side-nav stylish-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 -->
Changing logo background
You need to add following code to your template CSS file and set up appropriate image url.
.logo-wrapper {
background: url("") no-repeat center center;
background-size: cover;
}
