Skip to content

Instantly share code, notes, and snippets.

@reggi
Created February 25, 2014 17:14
Show Gist options
  • Save reggi/9213397 to your computer and use it in GitHub Desktop.
Save reggi/9213397 to your computer and use it in GitHub Desktop.
// Transparent navbar
//
// Reset transparent navbar basics
@navbar-transparent-color: transparent;
@navbar-transparent-bg: transparent;
@navbar-transparent-border: transparent;
// Transparent navbar links
@navbar-transparent-link-color: #fff;
@navbar-transparent-link-hover-color: #fff;
@navbar-transparent-link-hover-bg: transparent;
@navbar-transparent-link-active-color: #fff;
@navbar-transparent-link-active-bg: transparent;
@navbar-transparent-link-disabled-color: #fff;
@navbar-transparent-link-disabled-bg: transparent;
// Transparent navbar brand label
@navbar-transparent-brand-color: #fff;
@navbar-transparent-brand-hover-color: #fff;
@navbar-transparent-brand-hover-bg: transparent;
// Transparent navbar search
// Normal navbar needs no special styles or vars
@navbar-transparent-search-bg: #fff;
@navbar-transparent-search-bg-focus: #fff;
@navbar-transparent-search-border: #fff;
@navbar-transparent-search-placeholder-color: #fff;
// Transparent navbar toggle
@navbar-transparent-toggle-hover-bg: transparent;
@navbar-transparent-toggle-icon-bar-bg: #fff;
@navbar-transparent-toggle-border-color: #fff;
// !custom
.navbar-transparent{
.navbar-nav:hover a {
opacity:0.8;
}
.navbar-nav:hover a:hover {
opacity:1;
}
}
// transparent navbar
.navbar-transparent {
background-color: @navbar-transparent-bg;
border-color: @navbar-transparent-border;
.navbar-brand {
color: @navbar-transparent-brand-color;
&:hover,
&:focus {
color: @navbar-transparent-brand-hover-color;
background-color: @navbar-transparent-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-transparent-color;
}
.navbar-nav {
> li > a {
color: @navbar-transparent-link-color;
&:hover,
&:focus {
color: @navbar-transparent-link-hover-color;
background-color: @navbar-transparent-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-transparent-link-active-color;
background-color: @navbar-transparent-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-transparent-link-disabled-color;
background-color: @navbar-transparent-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-transparent-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-transparent-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-transparent-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-transparent-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-transparent-link-active-bg;
color: @navbar-transparent-link-active-color;
}
}
> .dropdown > a:hover .caret {
border-top-color: @navbar-transparent-link-hover-color;
border-bottom-color: @navbar-transparent-link-hover-color;
}
> .dropdown > a .caret {
border-top-color: @navbar-transparent-link-color;
border-bottom-color: @navbar-transparent-link-color;
}
> .open > a {
&,
&:hover,
&:focus {
.caret {
border-top-color: @navbar-transparent-link-active-color;
border-bottom-color: @navbar-transparent-link-active-color;
}
}
}
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-transparent-border;
}
> li > a {
color: @navbar-transparent-link-color;
&:hover,
&:focus {
color: @navbar-transparent-link-hover-color;
background-color: @navbar-transparent-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-transparent-link-active-color;
background-color: @navbar-transparent-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-transparent-link-disabled-color;
background-color: @navbar-transparent-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: @navbar-transparent-link-color;
&:hover {
color: @navbar-transparent-link-hover-color;
}
}
}
// White navbar
//
// Reset white navbar basics
@navbar-white-color: #333;
@navbar-white-bg: #fff;
@navbar-white-border: transparent;
// White navbar links
@navbar-white-link-color: #333;
@navbar-white-link-hover-color: @orange;
@navbar-white-link-hover-bg: transparent;
@navbar-white-link-active-color: #333;
@navbar-white-link-active-bg: transparent;
@navbar-white-link-disabled-color: #333;
@navbar-white-link-disabled-bg: transparent;
// White navbar brand label
@navbar-white-brand-color: #333;
@navbar-white-brand-hover-color: #333;
@navbar-white-brand-hover-bg: transparent;
// White navbar search
// Normal navbar needs no special styles or vars
@navbar-white-search-bg: #fff;
@navbar-white-search-bg-focus: #fff;
@navbar-white-search-border: #fff;
@navbar-white-search-placeholder-color: #ccc;
// White navbar toggle
@navbar-white-toggle-hover-bg: transparent;
@navbar-white-toggle-icon-bar-bg: #ccc;
@navbar-white-toggle-border-color: #ccc;
// white navbar
.navbar-white {
background-color: @navbar-white-bg;
border-color: @navbar-white-border;
.navbar-brand {
color: @navbar-white-brand-color;
&:hover,
&:focus {
color: @navbar-white-brand-hover-color;
background-color: @navbar-white-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-white-color;
}
.navbar-nav {
> li > a {
color: @navbar-white-link-color;
&:hover,
&:focus {
color: @navbar-white-link-hover-color;
background-color: @navbar-white-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-white-link-active-color;
background-color: @navbar-white-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-white-link-disabled-color;
background-color: @navbar-white-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-white-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-white-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-white-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-white-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-white-link-active-bg;
color: @navbar-white-link-active-color;
}
}
> .dropdown > a:hover .caret {
border-top-color: @navbar-white-link-hover-color;
border-bottom-color: @navbar-white-link-hover-color;
}
> .dropdown > a .caret {
border-top-color: @navbar-white-link-color;
border-bottom-color: @navbar-white-link-color;
}
> .open > a {
&,
&:hover,
&:focus {
.caret {
border-top-color: @navbar-white-link-active-color;
border-bottom-color: @navbar-white-link-active-color;
}
}
}
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-white-border;
}
> li > a {
color: @navbar-white-link-color;
&:hover,
&:focus {
color: @navbar-white-link-hover-color;
background-color: @navbar-white-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-white-link-active-color;
background-color: @navbar-white-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-white-link-disabled-color;
background-color: @navbar-white-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: @navbar-white-link-color;
&:hover {
color: @navbar-white-link-hover-color;
}
}
}
// Navbar default resets
body.body-navbar-fixed{
margin-top: 50px;
}
.navbar {
border-radius: 0;
margin-bottom: 0;
border: none;
.nav{
.brandon;
}
.navbar-toggle {
margin-top: 7px;
}
.navbar-brand{
position:absolute;
}
}
.navbar-absolute{
position:absolute;
width: 100%;
}
// the navbar with the holstee logo
.navbar-brand-holstee{
.fh-icon-holstee-logo{
height: 20px;
overflow: hidden;
display: block;
line-height: 0;
font-size: 150px;
}
.navbar-brand:hover{
color:@orange !important;
}
}
// ensure that the nave and the logo don't collide
@media (max-width: @screen-md){
.navbar-brand-holstee .navbar-nav > li > a {
padding-left: 12px;
padding-right: 12px;
}
}
@media (max-width: @screen-sm){
.navbar-brand-holstee .navbar-nav > li > a {
padding-left: 6px;
padding-right: 6px;
}
}
// the navbar with the mindful-matters logo
.navbar-brand-mm{
.navbar-brand{
padding-top:4px;
padding-bottom:4px;
}
.fh-icon-holsteeh{
font-size: 25px !important;
vertical-align: top;
display: inline-block;
padding-top: 7px;
}
&.navbar-white .navbar-brand .vr{
border-right: 1px solid #999;
}
&.navbar-transparent .navbar-brand .vr{
border-right: 1px solid #fff;
}
.vr{
height: 29px;
margin: 6px 10px;
display: inline-block;
vertical-align: top;
}
a.blog-link{
vertical-align: top;
display: inline-block;
line-height: 16px;
padding-top: 5px;
.top{
font-size: 14px;
letter-spacing: 1px;
}
.bottom{
font-size: 12px;
}
}
&.navbar-transparent{
a.blog-link,
a.holstee-link,
a.blog-link:hover,
a.holstee-link:hover{
color:#fff
}
.navbar-brand:hover a {
opacity:0.8;
}
.navbar-brand:hover a:hover {
opacity:1;
}
}
&.navbar-white{
a.blog-link,
a.holstee-link{
color:#333
}
a.blog-link:hover,
a.holstee-link:hover{
color:@orange;
}
}
}
// ensure that the nav and the logo don't collide
@media (max-width: @screen-md){
.navbar-brand-mm .navbar-nav > li > a {
padding-left: 9px;
padding-right: 9px;
}
}
@media (max-width: @screen-sm){
.navbar-brand-mm .navbar-nav > li > a {
padding-left: 4px;
padding-right: 4px;
}
}
@media (max-width: @grid-float-breakpoint){
.navbar-transparent{
.navbar-white !important;
.navbar-brand .vr{
border-right: 1px solid #999 !important;
}
}
}
@media (max-width: @grid-float-breakpoint){
.navbar-transparent,
.navbar-white{
.container{
padding-left:0px;
padding-right:0px;
}
.navbar-nav > li > a {
padding-left: 15px;
padding-right: 15px;
}
}
}
li.special a{
position:relative;
}
li.special a:after{
color: #F00;
font-size: 9px;
position: absolute;
top: 10px;
right: 3px;
content: 'new!'
}
nav .badge-simba{
position: absolute;
top: 10px;
left: 51px;
background:@orange;
}
@squidoan
Copy link

Well, pretty good script with custom brand badge.
I've found some easy way with just custom css - default navbar customization.
.navbar-default { background-color:transparent !important; border-color:transparent; background-image:none; box-shadow:none; }
Ref : http://twitterbootstrap.org/bootstrap-navbar-background-color-transparent/

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