Skip to main content
1 de 3
Alvarez
  • 4k
  • 4
  • 18
  • 39

Tu error es que no estas usando muy bien los selectores, te dejo un link donde puedes aprender sobre selectores y como modificar bootstrap

Y continuando con tu pregunta solo cambie la forma la forma en que intentabas llegar al navbar, use esto nav.navbar para acceder a ella.

    nav.navbar {
        background-color: #ae2822;
    }

    .navbar .navbar-brand {
      color: #f9f7f7;
    }

    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus {
      color: #c91b1b;
    }

    .navbar .navbar-text {
      color: #f9f7f7;
    }

    .navbar .navbar-nav .nav-link {
      color: #f9f7f7;
      border-radius: .25rem;
      margin: 0 0.25em;
    }

    .navbar .navbar-nav .nav-link:not(.disabled):hover,
    .navbar .navbar-nav .nav-link:not(.disabled):focus {
      color: #c91b1b;
    }

    .navbar .navbar-nav .nav-item.active .nav-link,
    .navbar .navbar-nav .nav-item.active .nav-link:hover,
    .navbar .navbar-nav .nav-item.active .nav-link:focus,
    .navbar .navbar-nav .nav-item.show .nav-link,
    .navbar .navbar-nav .nav-item.show .nav-link:hover,
    .navbar .navbar-nav .nav-item.show .nav-link:focus {
      color: #c91b1b;
      background-color: #f9f9f9;
    }

    .navbar .navbar-toggle {
      border-color: #f9f9f9;
    }

    .navbar .navbar-toggle:hover,
    .navbar .navbar-toggle:focus {
      background-color: #f9f9f9;
    }

    .navbar .navbar-toggle .navbar-toggler-icon {
      color: #f9f7f7;
    }

    .navbar .navbar-collapse,
    .navbar .navbar-form {
      border-color: #f9f7f7;
    }

    .navbar .navbar-link {
      color: #f9f7f7;
    }

    .navbar .navbar-link:hover {
      color: #c91b1b;
    }

    @media (max-width: 575px) {
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 767px) {
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:hover,
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 991px) {
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 1199px) {
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:hover,
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #f9f7f7;
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #c91b1b;
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #c91b1b;
      background-color: #f9f9f9;
    }


    }
    .thumb-name {
      font-weight: bold;
      display: block;
    }
    .stock-counter {
      opacity: 0.8;
      position: absolute;
      margin-top: 5px;
      right: 21px;
    }
    .badge {
      display: inline-block;
      min-width: 10px;
      padding: 3px 7px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      background-color: #777;
      border-radius: 10px;
    }
    .low-stock-alert {
      opacity: 0.8;
      position: absolute;
      margin-top: 5px;
      left: 21px;
      color: red;
    }
    .item-quantity {
      font-size: 40px;
    }
    .current-stock {
      font-size: 99px;
      font-weight: bold;
    }
    .item-number {
      font-size: 20px;
    }
    .item-title {
      font-size: 23px;
      font-weight: bold;
    }
    .item-price {
      font-size: 23px;
      font-weight: bold;
      color: #388e3c;
    }
    .pagination>.active>a,
    .pagination>.active>a:focus,
    .pagination>.active>a:hover,
    .pagination>.active>span,
    .pagination>.active>span:focus,
    .pagination>.active>span:hover {
      z-index: 3;
      color: #fff;
      cursor: default;
      background-color: #3c763d;
      border-color: #ccc;
    }
    a {
      color: #3c763d;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>

Alvarez
  • 4k
  • 4
  • 18
  • 39