How to override some bootstrap attributes?

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

The question they asked was which breakpoints of Bootstrap 3 and user list all with comments. Take the code he posted adds your custom css into the half queries you'd like to be affected.

Missing "points" in:

.navbar navbar-default navbar-fixed-top

It should look like this:

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

I'm not sure, but it seems like a } is missing too, it should look like this:

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

If it does not work, use !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 "! important" statement ?

Note that if you want to add the style when the width is less than 768px, you should use max-width:768px . Here explains in detail the mean queries.

Another interesting fact would be to use !important to make sure you add the style.

Here is an example that adds background-color:gray when 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><divclass="navbar">
  navbar
</div>