Navbar Toggle Styling

Bootstrap Studio Help
1

hello i'm really struggling with this, what do i have to click within BSS to affect the toggle, i want to change the color, replace the icon and give it a different state when its clicked?

2

https://ryanfitton.co.uk/blog/change-bootstrap-3-navicon-toggle/

Basic How to concept for font awwsome icon switch.

3

thanks for the link, looks like another custom code kinda thing, oh well! i have another question if you don't mind.

in BSS the navbar toggler (.navbar-toggler) comes with a border color property that applies a faint gray boxed line around the icon, how do i get rid of that seeing as it is locked?

i have tried copy to styles.css and set border-color to transparent, to initial and to inherit, the line still persists, i also set border to hidden, border-radius to 0

4 
.navbar-toggler  {  border: none;  }

or even better, define your own class: .custom-toggler and set your style.

looks like another custom code kinda thing

nope, just basic bootstrap.

5

All you have to do is add a icon to the button and delete the other two spans. Then change the default star icon to the bar.

Add the script$('.navbar-toggle').click(function() { $('.navbar-toggle i').toggleClass('fa-bars fa-times'); }); I uploaded to Online Components if you would like to download. Search for "Burger Animated"

6

the hamburger menu is defined inside https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css as

 .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");
}

and

.navbar-light .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.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

so you know what to redefine in your .custom-toggler class

7

@twinstream @marrco you guys are awesome! thanks a lot, i learned much following your instructions, made BSS a little cooler to use too.

8

You can even be tricky by doing it purely in CSS. You just need to make sure that you are loading FontAwesome 4 CSS (for this example). Just by having another FontAwesome 4 icon somewhere on the site will load it for you.

.navbar-light .navbar-toggler {
  border:0;
}

.navbar-light .navbar-toggler-icon {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  background-image:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.navbar-light .navbar-toggler-icon:before {
  content:"\f07b";
}

.navbar-light .navbar-toggler[aria-expanded=true] .navbar-toggler-icon:before {
  content:"\f07c";
}

Saj

9

@Saj Using a data-attribute [aria-expanded=true] in css as a style listener.....learn something new every day. (Nice)

10

Not exactly the same thing as data-attribute, but useful in the same way. It's an attribute that Accessibility tools use to assist notifying the user what state an element is in. Honestly, it should be there set as "false" by default so the user knows that this is something that can be expanded but it currently isn't.

Also, I cheated :) it's only pure CSS in this sense because there's already JS from bootstrap that will set it to "true/false" once it's been clicked.

:)

Saj

11

hmmn...yes, the aria accessibility attribute does not default on load to false....only becomes active once you open and close the menu. Do you see any harm in setting that to false in the html code so that the reader can understand the availability of a expanded menu ?

12

I don't see any harm in adding it preset to false. It gets added on the first click because it isn't there already. If it is it should just change the value then.

Saj