Bulma is a flexbox-based CSS framework used for developing beautiful and responsive websites. It comes with pre-styled components which makes it easier for developers to develop websites as they don’t have to style everything from scratch. In this article, we will be seeing how to use Navbar Burger in Bulma.
The Navbar burger is a Hamburger menu that shows only on touch devices. It is a container that contains three HTML span tags used for showing hamburger menu lines or the cross sign when the menu is active. The is-active modifier can be used on the navbar-burger container to turn it into a cross.
Bulma Navbar Burger Classes:
- navbar-burger: This class is used as the last child of the navbar-brand container to show the hamburger menu button on touch devices.
Syntax:
<a role="button" class="navbar-burger">
<span></span>
<span></span>
<span></span>
</a>Example: The below example illustrates how to use the Bulma Navbar Burger classes to make a hamburger button in Bulma.
<!DOCTYPE html> <html>
<head>
<title>Bulma Navbar Burger</title>
<link rel='stylesheet' href=
<style>
p{
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma Navbar Burger
</b>
<div class="container is-fluid">
<p><b>Navbar Burger:</b></p>
<nav class="navbar is-warning">
<div class="navbar-brand">
<a class="navbar-item"
<img src=
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
<p><b>Active Navbar Burger:</b></p>
<nav class="navbar is-warning">
<div class="navbar-brand">
<a class="navbar-item"
<img src=
</a>
<a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
</div>
</body>
</html>
|
Output:
Bulma Navbar burger
Reference Link: https://bulma.io/documentation/components/navbar/#navbar-burger