Skip to content

Instantly share code, notes, and snippets.

@jimbojsb
Last active February 6, 2018 21:57
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jimbojsb/6754116 to your computer and use it in GitHub Desktop.
Save jimbojsb/6754116 to your computer and use it in GitHub Desktop.
.nav-list for Bootstrap 3.0
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
background-color: #08c;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
.nav-list .divider {
*width: 100%;
height: 1px;
margin: ((1.428571429 / 2) - 1) 1px; // 8px 1px
*margin: -5px 0 5px;
overflow: hidden;
background-color: #428bca;
border-bottom: 1px solid white;
}
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 1.428571429;
color: #999;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
@bpopp
Copy link

bpopp commented Oct 17, 2013

Nice. This saved me some time. Thanks for sharing.

@Flammm
Copy link

Flammm commented Dec 15, 2014

margin: ((1.428571429 / 2) - 1) 1px; // 8px 1px
What kind of magic is it?!

@lloy0076
Copy link

lloy0076 commented Feb 6, 2018

Thanks 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment