Bulma Transparent Navbar
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" > w3wiki </ 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://w3wiki.net" > < img src = "https://media.w3wiki.net/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 > |
Output:
Reference: https://bulma.io/documentation/components/navbar/#transparent-navbar