The bootstrap toggler icon is an svg image defined in the stylesheet of bootstrap, there are only 2 of them, one navbar-light version:and the other one is the navbar-dark: version. The classes navbar-light / navbar-dark are defined at the <nav> element. At the same element the backgound color is defined as bg-light or bg-dark. Most of the time I will omit these background color classes, because they often do not blend in perfectly to their surrounding. Not using bg-light / bg-dark classes leaves the background transparent, so the background can be adjusted manually. Look at the banner image below, the toggler icon is visible enough to be noticed by visitors, but blends in nicely.
Note that the svg image only plots those 3 horizonal bars. The <button> element will be used to override the background color and border color, using explicit styles. (on DOM element level) But lets focus on the svg image for now. The naked svg image looks like this:
Most of the time that will do. But the toggler icon might be difficult to see when placed up on a banner defined as a background image, or when using overlays. Adding a lot of different styles to the stylesheet is not a practical solution and still very limited. Especially when using a cms system, where you want users to be able to colorize the toggler icon exactly to their liking. That can easily be done by adding the svg image as a background-image directly to the DOM element using explicit styles instead of using classes referring to a stylesheet. First have a look at the nav-bar-toggler-icon as defined in bootstrap's style sheet (bootstrap.css). As far as the navbar-toggler-icon concerns, we only focus on the rgba color setting. (highlighted in green) That's what has to be modified, nothing else.
Part of bootstrap's stylesheet:
Html part defining a menu button toggler. The highlighted colors correspond with the color input elements below the banner. Note we have not added a bg-light or bg-dark
One important thing about SVG images. When using it as a background image it has to be encoded.
One word about the browser's HTML parser copied from MDN html parser, it says: "The HTML parser is one of the most complicated and sensitive pieces of a browser. It controls how your HTML source code is turned into web pages".
the Toggler. The above Html part is repeated below and extended with these explicit styles.(highlighted in green).
For the color of navbar-toggler-item you only have to change the rgba part
It goes without saying that you are familiar with html, css and Bootstrap 4 navbars.
Mind you have to use " (as an escape) to define the url of the background image. You will also notice there
are no other background style settings then the background-image. These are defined by class: nav-bar-toggler-icon and do not need to be overwritten.
You can copy and paste the above <nav>...</nav> definition, it has been tested. Actually, this is an exact copy of what is being used in this html page.
Do not use a line break when defining styles, it has to be on one continues line in your html source.