Filling the top of a header (with color) without altering the navigation bar

Question

I asked a question here a few days ago:

Overriding Bootsrap with custom CSS related to search forms

that related to a bootstrap nav header, that was brilliantly answered by Charlie. He helped me tighten some code related to my header and navigation. Here was his working fiddle:

https://jsfiddle.net/8yufLL4n/

The code works greatly, but I want to fill in the rest of the header with that same color BG #30302f to eliminate the grey that comes standard in the bootstrap CSS, while still maintaining the positioning of the header as is.

Any thoughts on which element to fill the rest of the container up mask that space with that color?

CSS here:

.container {
    background:#30302f;
}

.container a{
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.container a:hover{
    text-decoration: underline;
    color: #ffffff;
}


.menuIcon {
    background:rgb(200,200,200);
}

.navbar-brand {
    height:auto;
}

#brandImage {
    max-width:60%;
}

@media (max-width:600px) {

    .navbar-brand {
    width:95%;
    padding:8px 2.5%;
    }

    #brandImage {
    max-width:100%;
    }
}

@media (min-width:990px) and (max-width:1200px) {
    .navbar-brand {
    width:250px;
    }
}

Side note: My text color still shades grey and not white, and the hover decoration doesn't change either. Is bootstrap overriding that as well?

Thanks again!

score 2 · Accepted Answer · answered Apr 24 '15 at 00:33

You just need to set the colour of navbar-default:

.navbar-default {
  background-color: #30302f;
}

For the font colour, use this:

.navbar-default .navbar-nav>li>a {
  color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  color: red;
}

Example fiddle: https://jsfiddle.net/8yufLL4n/3/

Filling the top of a header (with color) without altering the navigation bar

1 Answers1