Bulma: BUG: navbar is-transparent not working

[jimblue]

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.6.0]
My browser is: Chrome 61.0.3163.100
I am sure this issue is not a duplicate

Description

With this markup:

<nav class="navbar is-transparent" role="navigation" aria-label="main navigation">

It's not working on any screen sizes.

Also I think it should be better to make this work on all screen sizes. (not only desktop as the doc said)

[dlgoodchild]

Hi Jim, I was trying to do something similar, but when you closely read the documentation it says:

This will remove any hover or active background from the navbar items.

It doesn't actually say it will remove the background of the navbar. It is confusing though.
It's easy to implement yourself by extending the SCSS file.

[jimblue]

Hi @dlgoodchild and thanks for you message.

Indeed it's only remove hover and active background. I will extend bulma then.

Cheers

[jgthms]

Yes I agree the name is not the best but I couldn't find a better one.

[Gravitana]

To make transparent navbar, you must add this code

.navbar {
&.is-transparent {
background-color: transparent;
background-image: none;
}
}

[dlgoodchild]

@jgthms what about stateless or non-interactive, then implement transparent as true transparency (as with what would be expected)

[simeon9696]

To make transparent navbar, you must add this code

.navbar {
&.is-transparent {
background-color: transparent;
background-image: none;
}
}

Add to where?

[mkezmkez]

To make transparent navbar, you must add this code
.navbar {
&.is-transparent {
background-color: transparent;
background-image: none;
}
}

Add to where?

To the scss file you are using

[mattiasaxelsson]

A workaround can be to set the navbar-background-color variable to transparent:

$navbar-background-color: transparent;