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

Question

This is my code

    <nav class="navbar navbar-expand-lg navbar-md-dark navbar-lg-light"  style="background-color: #11100b;" id="nav-mob">
        <div class="container">
            <a class="navbar-brand " href="#">
                <img src="./logo dark.png" id="logochange" width="150" alt="LOGO">
            </a>

            <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">   
            </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?

Answer 1

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, class="navbar navbar-expand-lg navbar-md-dark navbar-lg-dark"

Answer 2

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.

Answer 3

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

OR

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);
}