Skip to content

Instantly share code, notes, and snippets.

@shengjie
Created August 27, 2015 09:11
Show Gist options
  • Save shengjie/5e73bd0da5d88f42a7e5 to your computer and use it in GitHub Desktop.
Save shengjie/5e73bd0da5d88f42a7e5 to your computer and use it in GitHub Desktop.
Admin style bootstrap nav-stacked improvements, has css3 white box arrow with black theme
.nav.nav-stacked .nav-item {
border-bottom: 1px solid #666;
}
.nav.nav-stacked .nav-item a {
color: #fff;
border-radius: 0;
position: relative;
}
.nav.nav-stacked .nav-item.active a:after {
left: 100%;
top: 50%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: 10px solid rgba(255, 255, 255, 0);
border-right-color: #ffffff;
margin-top: -10px;
margin-left: -20px;
}
.nav.nav-stacked .nav-item a:hover {
color: #ddd;
background: rgba(255, 255, 255, .2);
}
.nav.nav-stacked .active {
border-left: 4px solid rgb(25, 170, 141);
}
.nav.nav-stacked .nav-item.active a {
color: #333;
background: rgba(255, 255, 255, .8);
}
.nav.nav-stacked .nav-label .toggle-icon {
float: right;
}
.nav.nav-stacked .nav-second-level .nav-item {
background: rgba(255, 255, 255, .1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment