Bulma: header linear-gradient

[gfelot]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.7.1]
My browser is: FireFox && Chrome

Description

I want to overwrite $navbar-background-color with linear-gradient. Writing a #hex or plain value works. But I cannot use this function. I'm with CRA with node-sass-chokidar to build my scss -> css.

linear-gradient(rgb(0, 143, 210), rgb(31, 91, 155));

I modify myself the css produce and it's working on .nav > background and not with .nav > background-color

[emkajeej]

That's because $navbar-background-color is being used as a value for the .navbar's background-color property.
A gradient is in fact a background-image.

If you want the navbar to support a gradient as a background you should change

.navbar
  background-color: $navbar-background-color;
  ...

to

.navbar
  background-image: $navbar-background-color;
   ...

in components/navbar.sass.

[jgthms]

That is the correct solution: you need to write your own CSS to add a background-image instead.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.