Bulma es un marco CSS moderno que facilita la creación de interfaces hermosas y receptivas utilizando sus componentes prediseñados y muchas clases auxiliares de CSS. En este artículo, veremos cómo hacer que una barra de navegación sea transparente en Bulma.
Hacer que una barra de navegación sea transparente elimina todos los fondos activos y flotantes de los elementos de la barra de navegación.
Bulma Navbar clase transparente:
- is-transparent : esta clase se usa en el contenedor de la barra de navegación para hacer que la barra de navegación sea transparente.
Sintaxis:
<nav class="navbar is-transparent">
...
</nav>
Ejemplo: El siguiente ejemplo muestra la implementación de la clase is-transparent en el componente navbar en 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>
Producción:
Referencia: https://bulma.io/documentation/components/navbar/#transparent-navbar