Open In App

Bulma Hero Fullheight with Navbar

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 02 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads