Transparent Navbar with Bulma Css not working - html

Question

I'm experimenting with bulma css.
I really like it, but there's few things I don't get it.
I made a simple landing page for testing and I can't succeed having a transparent nav bar.
I want the nav bar to be transparent and then become white on scrolling. I can make it white and fixed on scrolling but not transparent.
This is my navbar. the full page is loaded on codepen
<nav class="navbar is-transparent is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand pl-4">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start"></div>
<div class="navbar-end pr-4">
<a class="navbar-item"> Home </a>
<a class="navbar-item"> About </a>
<a class="navbar-item"> Contact </a>
</div>
</div>
</nav>
Can you please help me find the issue?

Answer 1

The navbar class has its own background-color: #fff; therefore you always see a white background on the navbar. You can override this property with plain CSS.
index.html
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
....
</nav>
style.css
.navbar {
background-color: hsl(0 100% 100% / 0.4);
}
UPDATED
For the opposite:
Remove class="has-navbar-fixed-top" from the body tag.
To scrolling we need JS to intercept scroll values and change the opacity on the navbar.
document.addEventListener('DOMContentLoaded', function() {
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
// Get scroll position values
const trigger = window.scrollY;
// The top position when we change the opacity
const navbarHeight = navbar.clientHeight;
if (trigger >= navbarHeight) {
navbar.setAttribute('style', 'background-color: hsl(0 100% 100% / 1)');
} else {
navbar.setAttribute('style', 'background-color: hsl(0 100% 100% / 0.7)');
}
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css" />
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation" style="background-color: hsl(0 100% 100% / 0.7)">
<div class="navbar-brand pl-4">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start"></div>
<div class="navbar-end pr-4">
<a class="navbar-item"> Home </a>
<a class="navbar-item"> About </a>
<a class="navbar-item"> Contact </a>
</div>
</div>
</nav>
<div class="headerContainer" style="
height: 700px;
background-image: url('http://placeimg.com/1000/768/nature');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
"></div>