0

Peguei um menu da internet que usa o framework bootstrap, quando ele está numa tela maior que 768px a cor do menu inicialmente era cinza claro, eu troquei pra cinza escuro, porém quando a tela é menor que 768px, o menu fica cinza claro novamente, eu precisaria sobrescrever o local que faz o menu voltar pra cinza claro, porém não tenho conhecimentos de como usar a "tag" @media (caso seja essa mesmo que eu deva usar). Basta eu colocar no arquivo css algo assim:

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

Ou esse formato está errado?

3 Respostas 3

5

Falta os "pontos" em:

.navbar navbar-default navbar-fixed-top

Deveria ser assim:

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

Não tenho certeza, mas parece que falta um } também, deve ficar assim:

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

Ainda se não funcionar use o !important

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

Leia quem tem prioridade, é muito importante entender isto:

1
  • Obrigado a todos que ajudaram, todas as respostas foram de ótima ajuda. Commented 30/05/2017 às 16:57
2

Nota que se você quer adicionar o estilo quando a largura for menor que 768px, deve utilizar max-width:768px. Aqui explica detalhadamente as media queries.

Outro fato interessante seria utilizar !important p/ garantir que adicione o estilo.

Segue um exemplo que adiciona background-color:gray quando a width for menor ou igual a 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>

1
  • Obrigado a todos que ajudaram, todas as respostas foram de ótima ajuda. Commented 30/05/2017 às 16:57
1

Neste link no Stackoverflow em inglês você tem a lista de todos os media queries utilizados.

A pergunta que fizeram eram quais os breakpoints do Bootstrap 3 e usuário listou todos com comentários. Pegue o código que ele postou adiciona o seu css personalizado dentro das medias queries que gostaria que fossem afetadas.

1
  • Obrigado a todos que ajudaram, todas as respostas foram de ótima ajuda. Commented 30/05/2017 às 16:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .