Bulma Fixed navbar
Last Updated :
14 Feb, 2022
Bulma is a CSS framework based on flexbox. It ships with its own elements and components so you don’t have to style everything from scratch. In this article, we will be seeing how to make the navbar fixed to the top or bottom in Bulma using the CSS classes provided by the framework.
Bulma Fixed Navbar Classes:
To make Navbar fixed to top:
- has-navbar-fixed-top: This class is applied on the <html> or <body> element if it contains a navbar which is fixed to the top.
- is-fixed-top: This class is applied on the navbar component which is to be fixed to the top.
Syntax:
<body class="has-navbar-fixed-top">
<nav class="is-fixed-top">
...
</nav>
</body>
To make Navbar fixed to bottom:
- has-navbar-fixed-bottom: This class is applied on the <html> or <body> element if it contains a navbar which is fixed to the bottom.
- is-fixed-bottom: This class is applied on the navbar component which is to be fixed to the bottom.
Syntax:
<body class="has-navbar-fixed-bottom">
<nav class="is-fixed-bottom">
...
</nav>
</body>
Example 1: The below example illustrates how to make a fixed to top navbar with Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bulma Navbar Fixed to top
</title>
<link rel='stylesheet' href=
<style>
.navbar {
height: 70px;
padding: 10px;
}
.head{
margin-top: 70px;
}
</style>
</head>
<body class="has-text-centered
has-navbar-fixed-top">
<div class="container">
<nav class="navbar is-dark
is-fixed-top">
<div class="navbar-brand">
<a class="navbar-item"
<img src=
</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 class="head">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>
Bulma Navbar Fixed to top
</b>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The below example shows how to make a navbar fixed to the bottom in Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bulma Navbar Fixed to bottom
</title>
<link rel='stylesheet' href=
<style>
.navbar {
height: 70px;
padding: 10px;
}
</style>
</head>
<body class="has-text-centered
has-navbar-fixed-bottom">
<div class="container">
<nav class="navbar is-dark is-fixed-bottom">
<div class="navbar-brand">
<a class="navbar-item" href=
<img src=
</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 class="head">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Navbar Fixed to bottom</b>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/components/navbar/#fixed-navbar
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...