In this article, we'll be seeing Bulma Hero having Fullheight with Navbar. For using the navbar with the Hero component, we can use is-fullheight-with-navbar class.
Bulma Hero Fullheight with navbar class:
- is-fullheight-with-navbar- This class or modifier is used to include the navbar within the Hero section by reducing some space from the viewport.
Syntax:
<nav class="navbar">
...
</nav>
<section class="hero is-fullheight-with-navbar">
...
</section>
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
</head>
<body>
<nav class="navbar" role="navigation"
aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item
has-background-success" href="#">
<h1 class="has-text-white">
GeeksforGeeks
</h1>
</a>
<a role="button" class="navbar-burger"
aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample"
class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Blogs
</a>
<div class="navbar-item has-dropdown
is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About us
</a>
<a class="navbar-item">
Tutorials
</a>
<a class="navbar-item">
Practice
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-success">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-fullheight-with-navbar
is-dark">
<div class="hero-body content columns">
<h1 class="title column">
Welcome to GeeksforGeeks
</h1>
<p class="subtitle column">
This is Fullheight hero
with navbar that uses
<code>
is-fullheight-with-navbar
</code>
class.
</p>
</div>
</section>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
</head>
<body>
<!-- Header including navbar -->
<nav class="navbar" role="navigation"
aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item
has-background-success" href="#">
<h1 class="has-text-white">
GeeksforGeeks
</h1>
</a>
<a role="button" class="navbar-burger"
aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Blogs
</a>
<div class="navbar-item has-dropdown
is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About us
</a>
<a class="navbar-item">
Tutorials
</a>
<a class="navbar-item">
Practice
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-success">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-fullheight-with-navbar
is-light columns">
<div class="hero-body column">
<h1 class="title column">
Learn Programming Languages
</h1>
<div class="rows">
<div class="row has-text-white
has-background-primary p-4">
Java
</div>
<div class="row has-text-white
has-background-info p-4">
C++
</div>
<div class="row has-text-dark
has-background-warning p-4">
Python
</div>
<div class="row has-text-light
has-background-dark p-4">
C#
</div>
</div>
</div>
</section>
</body>
</html>
Output:
Reference: https://bulma.io/documentation/layout/hero/#fullheight-with-navbar
