Style bootstrap toggler icon colour

[Mary_8]

How do I style the opacity and colour of the bootstrap navbar toggler icon?

[Paul-M]

In Bootstrap 4 I think its an SVG background image something like this in bootstrap.css:

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

or like this:

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

edit the SVG properties as required

[Mary_8]

I have used the TWBSColor web site to style the navbar so have my own css style sheet that overrides certain aspects of the locked Bootstrap style sheet and I have incorporated these rules into my site style sheet. Do I create a new rule to override the Bootstrap rule? Here is the part of my style sheet relating to the navbar: .navbar {   background-color: #2d3fab; } .navbar .navbar-brand {   color: #ffffff; } .navbar .navbar-brand:hover, .navbar .navbar-brand:focus {   color: #ff0022; } .navbar .navbar-text {   color: #ffffff; } .navbar .navbar-text a {   color: #ff0022; } .navbar .navbar-text a:hover, .navbar .navbar-text a:focus {   color: #ff0022; } .navbar .navbar-nav .nav-link {   color: #ffffff;   border-radius: .25rem;   margin: 0 0.25em; } .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus {   color: #ff0022; } .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus {   color: #ff0022;   background-color: #2d3fab; } .navbar .navbar-toggle {   border-color: #2d3fab; } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus {   background-color: #2d3fab; } .navbar .navbar-toggle .navbar-toggler-icon { color: #ffffff; } .navbar .navbar-collapse, .navbar .navbar-form {   border-color: #ffffff; } .navbar .navbar-link {   color: #ffffff; } .navbar .navbar-link:hover {   color: #ff0022; } @media (max-width: 575px) {   .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {     color: #ffffff;   }   .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,   .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {     color: #ff0022;   }   .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {     color: #ff0022;     background-color: #2d3fab;   } } @media (max-width: 767px) {   .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {     color: #ffffff;   }   .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,   .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {     color: #ff0022;   }   .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {     color: #ff0022;     background-color: #2d3fab;   } } @media (max-width: 991px) {   .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {     color: #ffffff;   }   .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,   .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {     color: #ff0022;   }   .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {     color: #ff0022;     background-color: #2d3fab;   } } @media (max-width: 1199px) {   .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {     color: #ffffff;   }   .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,   .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {     color: #ff0022;   }   .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {     color: #ff0022;     background-color: #2d3fab;   } } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {   color: #ffffff; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {   color: #ff0022; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {   color: #ff0022;   background-color: #2d3fab; }

[Paul-M]

bootstrap 3 or 4 ?

[Mary_8]

4.0.0, it comes as standard with Dreamweaver CC but they keep updating it. A previous site I did last year was 3.3.7

[Paul-M]

try changing this rule:

.navbar .navbar-toggle .navbar-toggler-icon { color: #ffffff;

[Mary_8]

I know the code I pasted into my reply above is a bit hard to read but I think you will find that I have already done this: .navbar .navbar-toggle .navbar-toggler-icon { color: #ffffff; } It is a sort of white when previewed but it is very faint and I wonder if the opacity is set somewhere in Bootstrap?

[B i r n o u]

I'm not using Bootstarp at all, and so don't know it... but if you just want to affect the opacity of this toggle icon, you can also refer to alpha colors

[Paul-M]

I know bootstrap 4 uses svg for toggle icon ... Can you post a link to the page, its easier to provide the right answer then

[Paul-M]

you could try adding something like this to your custom CSS file:

.navbar .navbar-toggle .navbar-toggler-icon {   
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");  
}

The bit to pay attention to is: 'stroke='rgba(0,0,0,0.5)'

[Mary_8]

I am creating this site offline so cannot send a link. Many thanks for the suggestions, I will try these and report back.

[Mary_8]

Everything I try seems to throw other elements out. I am not a very skilled coder and find difficulty in working out exactly where to include the ideas suggested. I think I will have to finish the site and publish it and then it will be possible for you more skilled coders to see the problem. Thanks for the help so far.

[Nancy OShea]

Right click on document tab.  Select Open in browser.

Right click in your browser and select Inspect Element to see which CSS rules are effecting it.

[Mary_8]

Thank you Nancy, I did that. I know that the Bootstrap .css is determining how the Bootstrap navbar works and I have managed to create my own rules for colours etc but cannot work out how to modify the appearance of the hamburger icon when the menu is collapsed. It is white but very faint and I want to make it a sharper white. I believe that the icon is just a background image but cannot seem to create a new rule of my own to make it clearer and stand out more.

[Mary_8]

I have for now created a workaround by creating a new rule in my site css (.button) and giving it a different colour background to make it more prominent. I created my own "hamburger" image and tried to add that to the .button style but without success. Suggestions on that would be welcome!

[BenPleysier · Accepted solution]

As an exercise I changed colour of the toggler icon as follows.

.navbar-light .navbar-toggler {

  border-color: rgba(49, 222, 54, 0.3);

}

.navbar-light .navbar-toggler-icon {

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(49,222,54, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

}

This is the result

The following is probably too much information, but I'll put it there just in case.

• don't touch the original Bootstrap files
• create a new style sheet called styles.css or similar
• load styles.css after loading bootstrap.css or similar
• if an overriding style rule does not work, add !important

[Mary_8]

Thank you. I have now managed to place my own hamburger icon image created in Photoshop and saved as a gif by using an adapted version of your suggested css. Thank you also for the good advice about not touching original Bootstrap files, I knew I should avoid this but it is always worth being reminded. Very grateful for everyone's help as always.