When I change background color of Nav-Bar the hamburger icon is not visible-CodePudding

This is my code

    <nav   style="background-color: #11100b;" id="nav-mob">
        <div >
            <a  href="#">
                <img src="./logo dark.png" id="logochange" width="150" alt="LOGO">
            </a>

            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span >   
            </span>
            </button>

        </div>
    </nav>

The hamburger sign exists and does click but is not visible due to the dark background how do I change the colour or make the sign brighter?

CodePudding user response：

with boostrap it has preset themes, so when you change the them of the background you need to change the theme of the icon aswell to fit that so try this,

CodePudding user response：

Bootstrap .navbar-toggler-icon is a background so you cannot change its color.

https://www.flaticon.com/search?word=menü&type=icon

By registering to the site from the link I sent, you can change the color of the menu icon you want and download it as png and then you can use it.

CodePudding user response：

Given navbar classes is wrong BoootStrap Dose not provide a responsive background classes like "navbar-md-dark navbar-lg-light"

Change navbar class to "navbar navbar-dark bg-dark".

Write the custom css for hamburger color as per your code.

.navbar-md-dark .navbar-toggler {
  color: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.1);
}