Highlighted

Style bootstrap toggler icon colour

Explorer ,
Sep 24, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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
TOPICS
Create menus in Dreamweaver

Views

9.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Style bootstrap toggler icon colour

Explorer ,
Sep 24, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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
TOPICS
Create menus in Dreamweaver

Views

9.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Explorer ,
Sep 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

bootstrap 3 or 4 ?

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Explorer ,
Sep 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

try changing this rule:

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

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Explorer ,
Sep 24, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 1
Explorer ,
Sep 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Explorer ,
Sep 24, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 1
Explorer ,
Sep 25, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2018 0
Explorer ,
Sep 25, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2018 0
Adobe Community Professional ,
Sep 25, 2018

Copy link to clipboard

Copied

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

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2018 1
Mary_8 LATEST
Explorer ,
Sep 25, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2018 0