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:
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href =
</ 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:
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href =
</ 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