×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: CSS
Posted by: Lori DK
Added: Oct 6, 2016 1:31 PM
Views: 14
Change colours of nav bar for bootstrap
  1. $bgDefault      : #000000;
  2. $bgHighlight    : #f8a01b;
  3. $colDefault     : #ffffff;
  4. $colHighlight   : #ececec;
  5. $dropDown       : true;
  6. .navbar-default {
  7.   background-color: $bgDefault;
  8.   border-color: $bgDefault;
  9.   .navbar-brand {
  10.     color: $colDefault;
  11.     &:hover, &:focus {
  12.       color: $colHighlight; }}
  13.   .navbar-text {
  14.     color: $colDefault; }
  15.   .navbar-nav {
  16.     > li {
  17.       > a {
  18.         color: $colDefault;
  19.         &:hover,  &:focus {
  20.           color: $colHighlight; }}
  21.       @if $dropDown {
  22.         > .dropdown-menu {
  23.           background-color: $bgDefault;
  24.           > li {
  25.             > a {
  26.               color: $colDefault;
  27.               &:hover,  &:focus {
  28.                 color: $colHighlight;
  29.                 background-color: $bgHighlight; }}
  30.             > .divider {
  31.               background-color: $bgHighlight;}}}}}
  32.     @if $dropDown {
  33.       .open .dropdown-menu > .active {
  34.         > a, > a:hover, > a:focus {
  35.           color: $colHighlight;
  36.           background-color: $bgHighlight; }}}
  37.     > .active {
  38.       > a, > a:hover, > a:focus {
  39.         color: $colHighlight;
  40.         background-color: $bgHighlight; }}
  41.     > .open {
  42.       > a, > a:hover, > a:focus {
  43.         color: $colHighlight;
  44.         background-color: $bgHighlight; }}}
  45.   .navbar-toggle {
  46.     border-color: $bgHighlight;
  47.     &:hover, &:focus {
  48.       background-color: $bgHighlight; }
  49.     .icon-bar {
  50.       background-color: $colDefault; }}
  51.   .navbar-collapse,
  52.   .navbar-form {
  53.     border-color: $colDefault; }
  54.   .navbar-link {
  55.     color: $colDefault;
  56.     &:hover {
  57.       color: $colHighlight; }}}
  58. @media (max-width: 767px) {
  59.   .navbar-default .navbar-nav .open .dropdown-menu {
  60.     > li > a {
  61.       color: $colDefault;
  62.       &:hover, &:focus {
  63.         color: $colHighlight; }}
  64.     > .active {
  65.       > a, > a:hover, > a:focus {
  66.         color: $colHighlight;
  67.         background-color: $bgHighlight; }}}
  68. }