Improve burger menu

[ghost]

Hi,

Today, I used Bootstrap v4 alpha 6 and wanted to change color of burger menu (3 lines).
But I discovered that burger menu was a button which contained a span with a background-image.

This background-image is an SVG.. So developers can not change color...

I think it would be a good idea to:

FIRSTLY, change svg to three span to enable developers to modify burger menu color.

SECONDLY, in full css (keyframes) and/or with javascript/jquery, propose few animations like these codepen examples:

https://codepen.io/designcouch/pen/Atyop

Thanks!

[mdo]

You can customize the navbar toggler icon via Sass by changing the $navbar-dark-color or $navbar-light-color, which is used to generate the color on the SVG.

[fuzzy76]

Which essentially means bootstrap isn't usable for dark backgrounds without compiling your own? :(

[mdo]

I mean you can jump to that conclusion, or you can take a look at the source code, issues, and PRs that led to the code's current status and provide more valuable feedback in the form of suggested changes.

That said, I imagine you would need to recompile everything to build a completely dark site. Bootstrap's variables are setup to support that—it's why we extend the $body-bg and $body-color variables into other components. I wouldn't advice adding onto Bootstrap's compiled CSS for such a change.

[fuzzy76]

I get that you have to make decisions balancing features against each other. The problem now is that a lot of components has -dark variants for their classes which gets you almost all the way towards a dark page straight from a CDN bootstrap. The hamburger menu is the only component I've noticed so far that breaks it.