Bulma Navbar Color Modifiers are Not Working

Question

Adding color modifier classes to Bulma's navbar is supposed to change the background color (as mentioned here: http://bulma.io/documentation/components/navbar/#colors).

I find that this is working fine if I use the css version. But I"m using the sass version and it is not working.

Any idea why not?

Note -- this is also an unanswered issue on Github: https://github.com/jgthms/bulma/issues/1192

Answer 1

I updated to version 0.5.2 of Bulma and now it works as it should.

Answer 2

You have to create file like my-bulma-theme.scss, then override needed variables or import other .scss files with variables and finally, import bulma from node_modules and include that my-bulma-theme.scss in your pages/preprocessor.

For example my-bulma-theme.scss:

$navbar-background-color: #f0f0f0;
$another-bulma-variable: 14px;

@import './another-style-variables.scss';

@import '../node_modules/bulma/bulma.sass'; // must be the last thing in file