'
Bootstrap toggler icon color settings
Some knowledge about html, css and Bootstrap 4 is required.
July 2020
Page is not optimized for mobile devices
For a total overview you can download the html source of this page

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.

According to the Bootstrap style, the navbar-togller-icon is always in conjuntion with class "navbar-light" or "navbar-dark". To get arround that have a look at the same but extended html part definition in the javascript paragraph below.

Part of bootstrap's stylesheet:

.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke=' rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

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 background class in the <nav> element. The <nav> button and the navbar-toggler are controlled by javascript, depending on your input.
In the paragraph Javascript you can find an example that is hardcoded in HTML, which shows javascript is not required.

<nav id="cNav2nBut" class="navbar navbar-light p-1 justify-content-end">
<button id="cNav2But" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cNav2Collapse" aria-controls="cNav2Collapse" aria-expanded="false" aria-label="Toggle navigation">
<span id="cNav2ButToggler" class="navbar-toggler-icon"</span>
</button>
</nav>

To find out it might fit your requirements you can experiment with some settings. When using the the RGBA color picker, found at Menucool, first set the opacity before selecting a color, because selecting a color will automatically close the color picker. And do not forget to press the <Submit> button after making changes. Javascript is not required only when you want users to be able to define things themselves. After this we will have a brief look on the javascript routine used here to handle user input.

SVG

One important thing about SVG images. When using it as a background image it has to be encoded.

Let's start with a normal SVG, for that we use the navbar-toggler-icon again, presented as an image, not as a background image. In the left column is the icon and in the right column the html code used to show the icon. If you style the container (e.g div) with a width and height and you like the SVG image to respect that size set the SVG width and/or height to 100%, like: <svg width='100%' height='100%' .....
<div class="col-md-1 small-border">
<svg width='100%' height='100%' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'>
<path stroke='rgba(60,60,60,0.9)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/>
</svg>
</div>
Now we use the same icon, but than as a background image. Mind the difference in coding, Leaving alone that the url itself is not embedded between quotes. Everthing between url(.......) starts and ends using HTML code &qout; Also mind that the smaller and greater signs (< >) are escaped by %3C respectively %3E. It is a guess, but I assume everything between the parenthesises of the url will not go through the browser's HTML parser, so you have to see for it yourself. You also need to tell how the data should be interpreted using data:image/svg+xml, at the start of the url keyword.
Be aware the size of a container, like a <div>, does not adapt it's size to the size of the background-image. Therefor you might have to define the width & height of the container.
<div class="col-md-1 small-border" style="height:100px; width:100px; background-repeat:no-repeat; background-position: 50% 50%;background-image: url(&quot;data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(60,60,60,0.9)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E&quot;);"> </div>

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

For encoding you can use the javascript function encodeURI() that is supported by all major browsers. There are also a lot of sites where you can decode/encode SVG data, for example yoksel.github.io

Here you can toggle between the javascript functions encodeURI() and decodeURI(). The encodeURI function also escapes a blank to %20 which does not seem to have any impact. Nevertheless, I prefer a regular blank instead of %20. That can be achieved by executing: encodeURI(<variable-name>).replace(/%20/g,' ');

Javascript

As stated before javascript is not required. You can simply add explicit styles to the Button and 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.

This is an example where everything is set hardcoded in HTML. This does not require any javascript
<nav id="cNav2nBut" class="navbar p-1 justify-content-end">  <!-- Note, no navbar-light nor navbar-dark, no bg-dark nor bg-light class -->

<button id="cNav2But" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cNav2Collapse" aria-controls="cNav2Collapse" aria-expanded="false" aria-label="Toggle navigation" style="background-color:rgba(51,102,255,0.4); border-color:rgba(0,0,255,0.3);">
<span id="cNav2ButToggler" class="navbar-toggler-icon" style="background-image: url(&quot;data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e&quot;);"</span>
</button>
</nav>

Mind you have to use &quot; (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.

Javascript source

If you for some reason would like to allow user to define their own toggler color and setting, a simple javascript routine will be sufficient

The javascript source is not to difficult and has self explaining comments

The javascript routine has to know:

  • The Button id, to set the background-color and border-color of the button
  • The Toggler id, to set the svg background-image
  • The id's of background-, border- and svg background-image input variables (using the color picker)

In the Html part above you can see the id setting for the Button and the id setting for the Toggler.
<script>

window.addEventListener('load', (event) =>
// Submit button listener
document.getElementById('submitChange').addEventListener('click', backgrndImage, false);
});

function backgrndImage() {

// HTML <nav> related Bootstrap elements. First the Button and then the Toggler
var btn = document.getElementById('cNav2But');
var toggler = document.getElementById('cNav2ButToggler');

// HTML User input variables to change color values. (Those using the color picker)
var bgColor = document.getElementById('cNav2nButC').value;
var borderColor = document.getElementById('cNav2ButC').value;
var rgbaToggler = document.getElementById('cNav2ButTogglerC').value;

// Locale routine variables
var rgba = ' '; // Final svg rgba color.
var newSvg = ' '; // Complete new backgound-image svg.
// The svg definition is simply copied from the bootstrap css file. Avoid line breaks
var svgExample = 'url("data:image/svg+xml,%3csvg viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath stroke=\'rgba(0, 0, 0, 0.5)\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3e%3c/svg%3e")';

// regex search to rgba up until the next closing parenthesis. The result will be something like: rgba(66, 66, 66, .15)
var re = new RegExp('(rgba\\(.*?\\))', '');
var curRgba = re.exec(svgExample);

// Convert hex to rgba if necessary
rgba = hexToRgba(rgbaToggler);
// Replace "rgba(.., n.. )" in variable svgExample with the user defined rgba code
newSvg = svgExample.replace(curRgba[0], rgba);
// Change explicit styles of the toggler-icon and the button
toggler.style.backgroundImage = newSvg;
btn.style.backgroundColor = bgColor;
btn.style.borderColor = borderColor;

}
/* If a value is in hex format, convert it to rgba
* The colorPicker can return a hex format instead of a rgba format when the opacity is 1.
* If it is not in hex format, rgba is assumed and the parameter is returned as received.
*/
function hexToRgba(hexValue) {
var rtn = hexValue; // If already in rgba format, just return it.
var red = 0;
var green = 0;
var blue = 0;
var alpha = 1;

// Is in hex format?
if (hexValue.substr(0,1) === '#') {
red = Number('0x' + hexValue.substr(1,2));
green = Number('0x' + hexValue.substr(3,2));
blue = Number('0x' + hexValue.substr(5,2));
rtn = 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
}

return rtn;

}

</script>