Tu error es que no estas usando muy bien los selectores, te dejo un [link donde puedes aprender sobre selectores y como modificar bootstrap](http://librosweb.es/libro/bootstrap_3/capitulo_1/personalizando_bootstrap.html) 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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> #footer{ background-color:black; } 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; } <!-- language: lang-html --> <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"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Simple Stock</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="<?php if (isset($active_productos)){echo $active_productos;}?>"><a href="stock.php"><i class='glyphicon glyphicon-barcode'></i> Inventario</a></li> <li class="<?php if (isset($active_categoria)){echo $active_categoria;}?>"><a href="categorias.php"><i class='glyphicon glyphicon-tags'></i> Categorías</a></li> <li class="<?php if (isset($active_usuarios)){echo $active_usuarios;}?>"><a href="usuarios.php"><i class='glyphicon glyphicon-user'></i> Usuarios</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://obedalvarado.pw/contacto/" target='_blank'><i class='glyphicon glyphicon-envelope'></i> Soporte</a></li> <li><a href="login.php?logout"><i class='glyphicon glyphicon-off'></i> Salir</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> Editada: solo tienes que darle un id al footer, y despues darle el color que quieras: te dejo el ejemplo, si te fijas llame id="footer" a el div y luego aplique css a ese id, #footer{background-color:black} <div class="navbar navbar-default navbar-fixed-bottom" id="footer"> <div class="container"> <p class="navbar-text pull-left">© <?php echo date('Y');?> - Swisslub soluciones Integrales </p> <div class="navbar-text pull-right"> <?php echo $_SESSION['firstname'];?>           <?php echo $_SESSION['user_permision'];?> </div> </div> <div class="container"> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384- 0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <!-- end snippet -->