Known Participant

Answered

Style bootstrap toggler icon colour

Forum|Forum|7 years ago
September 24, 2018
2 replies
13696 views

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

Create menus in Dreamweaver

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

P

Paul-M

Legend

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

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

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

Legend

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

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

bootstrap 3 or 4 ?

Paul-M - Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded