change color of navbar

<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> Light color background </a> </nav> <nav class="navbar navbar-light bg-warning"> <a class="navbar-brand" href="#"> Warning color background </a> </nav>  <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#"> Dark color background </a> </nav>  <nav class="navbar navbar-dark bg-primary"> <a class="navbar-brand" href="#"> Primary color background </a> </nav> <nav class="navbar navbar-dark bg-secondary"> <a class="navbar-brand" href="#"> Secondary color background </a> </nav> <nav class="navbar navbar-dark bg-success"> <a class="navbar-brand" href="#"> Success color background </a> </nav>

changing navbar color bootstrap

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}

Posted by: Guest on February-01-2021

Source

Code answers related to "change color of navbar"

Code answers related to "Swift"

Browse Popular Code Answers by Language

Answers for "change color of navbar"

Code answers related to "change color of navbar"

Code answers related to "Swift"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us