1

O botão funciona normalmente quando aperta e em certas telas só que não aparece a cor dele,já tentei mudar manualmente mas não funcionou

htm:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/css/bootstrap.css">
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:500,600i&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
</head>
<header>

    <nav class="navbar navbar-expand-lg  bg">
      <div class="container"> 
        <a class="navbar-brand logo" href="#">
          <img src="/img/logo.svg" class="img-fluid" alt="Logo">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
          <span class="navbar-toggler-icon"></span>
        </button>

       <div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
             <a class="nav-link" href="#">Investimentos</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Serviços</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Contato</a>
            </li>
            <li class="nav-item active">
              <button class="btn btn-primary my-2 my-sm-0" 
               type="submit">Cadastre-se</button>
            </li>
          </ul>
        </div>
      </nav>

  </header> 

css:

.navbar{
  padding: 0.5rem  0;
}
.bg{
  background-color: #F4F4F4;
}
.nav-link{
  color: black;
  font-weight: 500;
}
.btn{
  border-radius: 0.3rem;
  font-weight: 500;
}
0

1 Resposta 1

2

Use a classe .navbar-light no botão para que a cor do hamburguer fique escura:

.navbar{ padding: 0.5rem 0; } .bg{ background-color: #F4F4F4; } .nav-link{ color: black; font-weight: 500; } .btn{ border-radius: 0.3rem; font-weight: 500; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<header>

    <nav class="navbar navbar-expand-lg bg">
      <div class="container"> 
        <a class="navbar-brand logo" href="#">
          <img src="/img/logo.svg" class="img-fluid" alt="Logo">
        </a>
        <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
          <span class="navbar-toggler-icon"></span>
        </button>

       <div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
             <a class="nav-link" href="#">Investimentos</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Serviços</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Contato</a>
            </li>
            <li class="nav-item active">
              <button class="btn btn-primary my-2 my-sm-0" 
               type="submit">Cadastre-se</button>
            </li>
          </ul>
        </div>
      </nav>

  </header>

2
  • percebi que é isso mesmo parece que pega a cor que tá no navbar e só pega essas cor. Commented 24/09/2019 às 20:32
  • Pq quando vc coloca navbar-light não fica branco ao invés de preto ? Como faria para ficar branco ? Commented 13/06/2020 às 22:35

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