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

Style bootstrap toggler icon colour

  • September 24, 2018
  • 2 replies
  • 13653 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
Community Expert
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
Community Expert
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 24, 2018

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

P
Paul-M
Community Expert
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; }

M
Mary_8Author
Known Participant
September 24, 2018

try changing this rule:

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


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?

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