Transparent Navbar with Bulma Css not working

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:

1. Remove class="has-navbar-fixed-top" from the body tag.
2. 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>