How to overwrite some bootstrap attributes?

Question

I took a menu from the internet that uses the bootstrap framework, when it is on a screen larger than 768px the menu color was initially light gray, I switched to dark gray, but when the screen is less than 768px, the menu turns light gray again, I would need to overwrite the place that makes the menu go back to light gray, but I have no knowledge of how to use the "tag" @media (if this is the one I should use). I just put something like this in the css file:

@media (min-width:768px) {
    .navbar navbar-default navbar-fixed-top {
        background-color: gray;
    }

Or that shape is wrong?

Answer 1

Missing the "points" in:

.navbar navbar-default navbar-fixed-top

It should be like this:

.navbar .navbar-default .navbar-fixed-top

I’m not sure, but I seem to be missing one } also, should stay like this:

@media (min-width:768px) {
    .navbar navbar-default navbar-fixed-top {
        background-color: gray;
    }
}

If it doesn’t work use the !important

@media (min-width:768px) {
    .navbar .navbar-default .navbar-fixed-top {
        background-color: gray !important;
    }
}

Read who has priority, it is very important to understand this:

• Which css selector has priority
• What is the purpose of the declaration "! Mportant"?

Answer 2

Note that if you want to add style when width is minor which 768px, shall use max-width:768px. Here explains in detail the media queries.

Another interesting fact would be to use !important p/ ensure that add style.

Here’s an example that adds background-color:gray when the width is less than or equal to 600px:

.navbar {
  background-color: black;
  height: 20px;
  width: 100%;
  color: white;
  text-align: center;
}

@media (max-width:600px) {
  .navbar {
    background-color: gray !important;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  navbar
</div>

Answer 3

In this link in Stackoverflow in English you have the list of all media queries used.

The question they asked was which Bootstrap 3 breakpoints and user listed all with comments. Grab the code that he posted adds his custom css within the medias queries that you’d like to be affected.