Skip to main content
M
Mary_8
Known Participant
September 24, 2018
Answered

Style bootstrap toggler icon colour

  • September 24, 2018
  • 2 replies
  • 13674 views

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

This topic has been closed for replies.
Correct answer BenPleysier

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!


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

2 replies

P
Paul-M
Legend
September 24, 2018

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 - Community Expert
P
Paul-M
Legend
September 24, 2018

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)'

Paul-M - Community Expert
M
Mary_8Author
Known Participant
September 25, 2018

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.


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!

P
Paul-M
Legend
September 24, 2018

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

Paul-M - Community Expert
M
Mary_8Author
Known Participant
September 24, 2018

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

P
Paul-M
Legend
September 24, 2018

bootstrap 3 or 4 ?

Paul-M - Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices