4

Estou querendo fazer um menu fixo usando booststrap, de tal forma que seja responsivo; ou seja, quando diminuir a tela o menu vire um ícone.

Porém, quando eu diminuo a tela do viewport o ícone parece estar lá, mas não aparece visualmente.

 <!-- NAV FIXED -->
 <nav class="navbar navbar-expand-lg fixed-top navegacao">
  <div class="container">
      <a href="#" class="navbar-brand"> 
          <img src="img/logo2.png" height="30">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Menu Colapso">  
       <span class="navbar-toggler-icon text-light"></span>
     </button>

     <div id="menu" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto text-light nav-menu">
          <li class="nav-item"> 
             <a href="#header" class="nav-link text-light font-weight-bold">Item 1</a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 2</a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 3</a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 4</a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 5 </a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 6 </a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold" id="servicos">Item 7 </a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 8 </a> 
          </li>
         </ul>
       </div>
   </div>

Código CSS:

.navegacao {
            height: 50px;
            background-color: black;
            box-shadow: 1px 2px #54542c;
            color: aliceblue;
            text-align: center;
}

.nav-menu > li {
            padding: 0 0 0 30px;
}
4
  • Provavelmente este seu Css está ocasionando o problema.
    – LeAndrade
    18/12/2018 às 15:32
  • Eu já retirei todo meu css externo e ainda não aparece visualmente o ícone, mas quando passo com mouse em cima, vejo que está alí o ícone.
    – Lorram RJ
    18/12/2018 às 15:41
  • Qual versão do bootstrap está usando?
    – LeAndrade
    18/12/2018 às 15:41
  • Bootstrap v4.1.3
    – Lorram RJ
    18/12/2018 às 15:51

2 Respostas 2

4

Como você pode ver no exemplo abaixo, o menu Hamburger está lá, acontece que o seu Css estava sobrescrevendo o do Bootstrap. Existem algumas classes que podem te ajudar a estilizar sem precisar mexer no Css, como navbar-dark por exemplo que seta a cor de fundo da barra de menu para um tom cinza escuro, como pode ver melhor aqui:

.navegacao {
  box-shadow: 1px 2px #54542c;
  text-align: center;
}

.nav-menu>li {
  padding: 0 0 0 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- NAV FIXED -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navegacao">
  <div class="container">
    <a href="#" class="navbar-brand">
      <img src="img/logo2.png" height="30">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Menu Colapso">  
       <span class="navbar-toggler-icon text-light"></span>
     </button>

    <div id="menu" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto text-light nav-menu">
        <li class="nav-item">
          <a href="#header" class="nav-link text-light font-weight-bold">Item 1</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 2</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 3</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 4</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 5 </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 6 </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold" id="servicos">Item 7 </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 8 </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

3
  • 1
    Boa, mas vc não precisa ficar preso nas cores do BS4 vou dar uma explicação tb :)
    – hugocsl
    18/12/2018 às 16:47
  • 1
    Boa Hugo, posta aí sim. Fiquei com medo de confundir ele.
    – LeAndrade
    18/12/2018 às 16:52
  • hahaha, até pode ser mesmo... depois que terminei pode ser que os iniciantes tenham alguma dificuldade nos detalhes, mas tentei ser bem didático...
    – hugocsl
    18/12/2018 às 16:59
3

É o seguinte, vc deixou de usar as classes de cor originais do Bootstrap, tipo navbar-light ou navbar-dark, assim como o bg-light ou bg-dark etc, por isso o seu button não aparece, pois só aplica a cor nele caso tenha uma classe de cor na navbar

Uma forma de conseguir colocar uma cor no button sem ficar preso nas cores padrão do Bootstrap e colocar a cor manualmente criando uma classe custom.

.custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom.navbar-toggler {
  border-color: rgba(255,0,0,1);
} 

Se vc reparar vai ver que dentro do button tem um span. No button fica a cor da borda, e nesse span de dentro fica uma background-imagem um svg que vc pode trocar a cor para a cor que quiser no stroke.

Esse é o botão padrão do Bootstrap 4, ele assume a cor junto com as classes de cor

inserir a descrição da imagem aqui

<button class="navbar-toggler custom" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Menu Colapso">
    <span class="navbar-toggler-icon text-light"></span>
</button>

Veja esse exemplo para entender melhor.

OBS: vc tinha colocado um valor de height de 50px isso limita o funcionamento correto da navbar, então removi nesse exemplo.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>


.navegacao {
    /* height: 50px; */
    background-color: black;
    box-shadow: 1px 2px #54542c;
    color: aliceblue;
    text-align: center;
}

.nav-menu > li {
    padding: 0 0 0 30px;
}

.custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom.navbar-toggler {
  border-color: rgba(255,0,0,1);
} 
</style>
</head>

<body>

<!-- NAV FIXED -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light navegacao">
    <div class="container">
        <a href="#" class="navbar-brand">
            <!-- <img src="img/logo2.png" height="30"> -->
        </a>
        <button class="navbar-toggler custom" type="button" data-toggle="collapse" data-target="#menu"
            aria-controls="menu" aria-expanded="false" aria-label="Menu Colapso">
            <span class="navbar-toggler-icon text-light"></span>
        </button>

        <div id="menu" class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto text-light nav-menu">
                <li class="nav-item">
                    <a href="#header" class="nav-link text-light font-weight-bold">Item 1</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 2</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 3</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 4</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 5 </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 6 </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold" id="servicos">Item 7 </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 8 </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

3
  • Pq é o inverso. navbar-dark fica com o texto branco e navbar-light com o texto escuro ? 13/06/2020 às 22:41
  • @GatodeSchrödinger não tem segredo, basta ler a resposta com calma, se o fundo eh preto o texto não pode ser preto tbm correto. Então se vc coloca uma classe de bg preto o texto tem que ser branco, a não ser que vc use um leitor de tela, ai nem precisa de CSS...
    – hugocsl
    14/06/2020 às 0:07
  • Ah, entendi. Ali vc está mencionando a cor do navbar e não do texto. Então automaticamente o bootstrap coloca a cor de texto que fica mais visível em relação a cor do navbar. 14/06/2020 às 0:27

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 .