Bootstrap menu button color does not appear

Asked

Viewed 273 times

1

The button works normally when pressing and on certain screens only it does not appear the color of it,

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;
}
html css bootstrap-4

1 answer

2

Use the class .navbar-light on the button to make the burger color dark:

.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>

  • I realized that’s what it looks like it takes the color that’s in the navbar and only takes these colors.

  • When you put navbar-light does not turn white instead of black ? How would you turn white ?

Browser other questions tagged html css bootstrap-4

You are not signed in. Login or sign up in order to post.