.navbar-default {
background-color: #191919;
border-color: #191919;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #00ace9;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #00ace9;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #00ace9;
background-color: #fff056;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #00ace9;
background-color: #fff056;
}
.navbar-default .navbar-toggle {
border-color: #191919;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #fff056;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #00ace9;
}

@media (max-width: 767px) {
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		color: #ffffff;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
		color: #00ace9;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
	color: #00ace9;
	background-color: #fff056;
	}
}
$defbackgrnd  : #191919;
$activebg     : #fff056;
$colordefault : #ffffff;
$activecolor  : #00ace9;
$bdrcolor     : #191919;
$dropDown     : false;
.navbar-default {
  background-color: $defbackgrnd;
  border-color: $bdrcolor;
  .navbar-brand {
    color: $colordefault;
    &:hover, &:focus { 
      color: $activecolor; }}
  .navbar-text {
    color: $colordefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colordefault;
        &:hover,  &:focus {
          color: $activecolor; }}
      @if $dropDown {
        > .dropdown-menu {
          background-color: $defbackgrnd;
          > li > a {
            color: $colordefault;
            &:hover,  &:focus {
              color: $activecolor;
              background-color: $activebg; }}
          .divider {
            background-color: $activebg;}}}
    }
    > .active {
      > a, > a:hover, > a:focus {
        color: $activecolor;
        background-color: $activebg; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $activecolor;
        background-color: $activebg; }}}
  .navbar-toggle {
    border-color: $bdrcolor;
    &:hover, &:focus {
      background-color: $activebg; }
    .icon-bar {
      background-color: $colordefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colordefault; }
  .navbar-link {
    color: $colordefault;
    &:hover {
      color: $activecolor; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colordefault;
      &:hover, &:focus {
        color: $activecolor; }}
    > .active {
      > a, > a:hover, > a:focus {
        color: $activecolor;
        background-color: $activebg; }}}
}
	
$defbackgrnd  : #191919 
$activebg     : #fff056 
$colordefault : #ffffff 
$activecolor  : #00ace9 
$bdrcolor     : #191919 
$dropDown     : false 

.navbar-default 
  background-color: $defbackgrnd
  border-color: $bdrcolor
  .navbar-brand 
    color: $colordefault
    &:hover, &:focus 
      color: $colHighlight
  .navbar-text 
    color: $colordefault
  .navbar-nav 
    > li 
      > a 
        color: $colordefault
        &:hover, &:focus 
          color: $colHighlight
      @if $dropDown
        > .dropdown-menu
          background-color: $defbackgrnd
          > li > a
            color: $colordefault
            &:hover, &:focus
              color: $colHighlight
              background-color: $activebg
          .divider
            background-color: $activebg
    > .active 
      > a, > a:hover, > a:focus 
        color: $colHighlight
        background-color: $activebg 
    > .open 
      > a, > a:hover, > a:focus 
        color: $colHighlight
        background-color: $activebg 
  .navbar-toggle 
    border-color: $bdrcolor
    &:hover, &:focus 
      background-color: $activebg 
    .icon-bar 
      background-color: $colordefault
  .navbar-collapse,
  .navbar-form 
    border-color: $colordefault 
  .navbar-link 
    color: $colordefault
    &:hover 
      color: $activecolor
@media (max-width: 767px) 
  .navbar-default .navbar-nav .open .dropdown-menu 
    > li > a 
      color: $colordefault
      &:hover, &:focus 
        color: $colHighlight
    > .active 
      > a, > a:hover, > a:focus 
        color: $colHighlight
        background-color: $activebg
@defbackgrnd  : #191919 ;
@activebg     : #fff056 ;
@colordefault : #ffffff ;
@activecolor  : #00ace9;
@bdrcolor     : #191919;
@dropDown     : false;
.ddm() when (@dropDown) {
  > .dropdown-menu {
    background-color: @defbackgrnd;
    > li > a {
      color: @colordefault;
      &:hover,  &:focus {
        color: @activecolor;
        background-color: @activebg; }}
    .divider {
      background-color: @activebg;}}}
.navbar-default {
  background-color: @defbackgrnd;
  border-color: @bdrcolor;
  .navbar-brand {
    color: @colordefault;
    &:hover, &:focus { 
      color: @activecolor; }}
  .navbar-text {
    color: @colordefault; }
  .navbar-nav {
    > li {
      > a {
        color: @colordefault;
        &:hover,  &:focus {
          color: @activecolor; }}
      .ddm }
    > .active {
      > a, > a:hover, > a:focus {
        color: @activecolor;
        background-color: @activebg; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: @activecolor;
        background-color: @activebg; }}}
  .navbar-toggle {
    border-color: @bdrcolor;
    &:hover, &:focus {
      background-color: @activebg; }
    .icon-bar {
      background-color: @colordefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: @colordefault; }
  .navbar-link {
    color: @colordefault;
    &:hover {
      color: @activecolor; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: @colordefault;
      &:hover, &:focus {
        color: @activecolor; }}
    > .active {
      > a, > a:hover, > a:focus {
        color: @activecolor;
        background-color: @activebg; }}}
}

How to use bootstrap navbar online generator

1. Choose you favorite color

2. Generate CSS/SASS/SCSS/LESS code

3. Copy these code as custom_navbar.css

4. Put custom_navbar.css on below your bootstrap.min.css or bootstrap.css