Bulma Transparent Navbar

Last Updated : 14 Feb, 2022

Bulma is a modern CSS framework that makes it easier to build beautiful and responsive interfaces using its pre-styled components and many helper CSS classes. In this article, we will be seeing how to make a navbar transparent in Bulma.

Making a navbar transparent removes all the active and hover backgrounds from the navbar-items.

Bulma Navbar Transparent Class:

is-transparent: This class is used on the navbar container to make the navbar transparent.

Syntax:

<nav class="navbar is-transparent">
    ...
</nav>

Example: The below example shows the implementation of the is-transparent class on the navbar component in Bulma.

HTML

<!DOCTYPE html> 
<html> 
   
<head> 
  <title> 
      Bulma Navbar Transparent 
  </title> 
   
  <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
   
  <style> 
    .navbar { 
      margin-top: 20px; 
      padding: 10px; 
    } 
  </style> 
</head> 
   
<body class="has-text-centered"> 
  <h1 class= 
      "is-size-2 has-text-success"> 
      GeeksforGeeks 
  </h1> 
   
  <b> 
      Bulma Navbar Transparent 
  </b> 
   
  <div class="container"> 
      <!-- Transparent navbar -->
   
    <nav class="navbar is-transparent"> 
      <div class="navbar-brand"> 
        <a class="navbar-item"
           href="https://geeksforgeeks.org"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png"> 
        </a> 
   
        <div class="navbar-burger"
          data-target="navBackgroundDemo1"> 
          <span></span> 
          <span></span> 
          <span></span> 
        </div> 
      </div> 
   
      <div id="navBackgroundDemo1"
        class="navbar-menu"> 
        <div class="navbar-start"> 
          <a class="navbar-item" href="#"> 
            Home 
          </a> 
          <a class="navbar-item" href="#"> 
            Courses 
          </a> 
        </div> 
   
        <div class="navbar-end"> 
          <div class="navbar-item"> 
            <div class="field is-grouped"> 
              <p class="control"> 
                <button class="button is-primary"> 
                  Algorithms 
                </button> 
              </p> 
   
              <p class="control"> 
                <button class="button is-primary is-outlined"> 
                  Data Structures 
                </button> 
              </p> 
            </div> 
          </div> 
        </div> 
      </div> 
    </nav> 
  </div> 
</body> 
</html> 