Bulma: Hamburger menu icon color

[xereda]

How do I change the color of the hamburger and close icons of sidemenu Bulma?

Tks

[rowellx68]

You could do something like this:

CSS

.nav .nav-toggle span {
    background-color: #6a67ce;
}

SASS

.nav {
    .nav-toggle {
        span {
            background-color: #6a67ce;
        }
    }
}

[wakatara]

I'm actually having this same issue as well, and having trouble figuring out how to alter the actual colour of the text (and puzzling out how this is implemented actually after wading through the css since it seems to just take the basic nav-item values but not allow them to be altered.).

Is there a way to modify the .nav.nav-toggle.is-active to alter the text? Otherwise, changing header colours and such in the menu really messes with what you can do with the toggle.

[wakatara]

(sorry, in case that wasn't clear... altering the background-color values I can see in the css iteself, so that's not tricky... but the actual alteration of the burger and close menu icons itself in terms of styling, seems non-obvious... as well as altering the actual .nav-items in the case of using the toggle. Could def use a pointer on how to do this as well.

[matthewdarwin]

I cannot figure out how to change the color of the "X" from this example.

[matthewdarwin]

Ok, a bit complicated. White text on blue background. Note I'm not changing the foreground/background because I don't want other things changed.

This is for version 0.5.1

@import "sass/utilities/initial-variables"

$blue: #336699
$navbar-background-color: $blue
$navbar-dropdown-background-color: $blue
$navbar-item-hover-background-color: $blue
$navbar-dropdown-item-hover-background-color: $blue
$navbar-dropdown-item-active-background-color: $blue

$link: $blue
$navbar-dropdown-color: $white
$navbar-dropdown-arrow: $white
$navbar-item-color: $white
$navbar-dropdown-item-hover-color: #00FFFF
$navbar-item-hover-color: #00FFFF

@import "bulma"

.navbar-burger:hover
background-color: $blue

.navbar-burger.burger.is-active
background-color: $blue
span
background-color: $white

.navbar-burger
span
background-color: $white

[matthewdarwin]

Hmm, indenting wasn't kept... try again

.navbar-burger:hover

background-color: $blue

.navbar-burger.burger.is-active

background-color: $blue

span

background-color: $white

.navbar-burger

span

background-color: $white

[mallardduck]

These issues can now be resolved by using $navbar-burger-color in the latest version.

[jgthms]

You’re right @mallardduck. It’s coming in 0.7.2