My navbar is transparent but i want to change the toggle background to a colour-CodePudding

The Navbar i have built in Bootstrap 5 is transparent but on the toggle view on mobile the nav links are being lost within the hero image text. I would like to keep the main navigation bar as transparent and alter the background of just the toggle to #F7F5F0 and remove the brand logo from the toggle view. I have tried the first two options below, neither of which are working and now a little stumped as how to fix this. Any advice would be greatly appreciated.

@media (max-width:767px) {
  .navbar-nav {
    background: #F7F5F0;
  }
}

.collapse .navbar-collapse {
    background-color: #F7F5F0;
}

html

    <nav >
       <div >
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
          </button>
       <div  id="navbarTogglerDemo01">
          <a href="index.html" ><img src="/assets/images/MothersSpinesLogo.png" alt="Mothers Spines MS Logo"></a>
       <ul id="nav" >
         <li >
            <a  href="index.html">home</a>
         </li>
         <li >
            <a  href="about.html">about</a>
         </li>
         <li >
            <a  href="contact.html">contact</a>
         </li>
       </ul>
      </div>
    </div>
 </nav>

.navbar-brand {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 60px;
    max-width: 60px;
    margin-left: 30px;
}

nav {
    width: 100%;
    }

ul .nav {
    flex: 1;
    justify-content: flex-end;
}

.navbar {
    align-items: end;
    background: none;
    background-color: rgba(0, 0, 0, 0.0);
    --bs-navbar-nav-link-padding-x: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 120%;
    list-style-type: none;
    letter-spacing: 1px;
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.0);
    position: absolute;
    padding-right: 180px;
}

.nav-item {
    padding-top: 25px;
}

.nav-link {
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: #252525;
    padding: 5px 0px;
    margin: 15px 20px;
}

CodePudding user response：

My guess is that you need to add !important to your CSS background to put it in higher priority than bootstrap:

 background-color: #F7F5F0!important;

Hope it helps

CodePudding user response：

Change hamburger color: .navbar-toggler { background: #F7F5F0 !important; }
Remove logo on mobile: add classes d-sm-block d-none in HTML

See the snippet below.

.navbar-brand {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  max-height: 60px;
  max-width: 60px;
  margin-left: 30px;
}

nav {
  width: 100%;
}

ul .nav {
  flex: 1;
  justify-content: flex-end;
}

.navbar {
  align-items: end;
  background: none;
  background-color: rgba(0, 0, 0, 0.0);
  --bs-navbar-nav-link-padding-x: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 120%;
  list-style-type: none;
  letter-spacing: 1px;
  --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.0);
  position: absolute;
  padding-right: 180px;
}

.nav-item {
  padding-top: 25px;
}

.nav-link {
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  color: #252525;
  padding: 5px 0px;
  margin: 15px 20px;
}

/* Added */
.navbar-toggler {
  background: #F7F5F0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<nav >
  <div >
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarTogglerDemo01">
      <a href="index.html" ><img src="/assets/images/MothersSpinesLogo.png" alt="Mothers Spines MS Logo"></a>
      <ul id="nav" >
        <li >
          <a  href="index.html">home</a>
        </li>
        <li >
          <a  href="about.html">about</a>
        </li>
        <li >
          <a  href="contact.html">contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>