Multi-level sidenav

I need a simpler side navigation style

Here is the CSS that this layout requires

/* Full width padding override */
.full-width-container.no-padding {
	margin-left: 0;
	margin-right: 0;
}

/* Full width padding override */
.full-width-container.no-padding .expand {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
/* This class adds the padding back in */
.full-width-container.no-padding .space {
	padding-left: 15px;
	padding-right: 15px;
}
@media screen and (max-width: 979px) {
	/* Full width padding override */
	.full-width-container.no-padding .expand {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
	/* Full width padding override */
	.full-width-container.no-padding > .expand {
		margin-left: -20px;
		margin-right: -20px;
	}
	/* This class adds the padding back in */
	.full-width-container.no-padding .space {
		padding-left: 20px;
		padding-right: 20px;
	}
}

Apply the classes above to your HTML to achieve the desired effect

<div class="full-width-container no-padding"></div>

--------

<ul class="breadcrumb expand space">
   <li>...</li>
</ul>

It's that easy!

Awesome Awesomeson doing something amazing