Bulma Navbar Brand

Bulma is a CSS framework that ships with pre-styled components to make it easier for developers to make beautiful and responsive websites. It is based on flexbox. In the article, we will be seeing how to use Navbar Brand in Bulma.

The Navbar brand is the left side of the navbar which can contain navbar items and a navbar-burger as the last child. The navbar brand is always visible to the user irrespective of the viewport size.

Bulma Navbar Brand Classes:

navbar-brand: This class defines a container that contains navbar items and navbar-burger. It is on the left side of the navbar menu.
navbar-burger: This class is used as the last child of the navbar-brand container. It contains three empty span tags which show the hamburger menu button on touch devices, or the cross button when the hamburger menu is active.

Syntax:

<div class="navbar-brand">
    <div class="navbar-item">
    ...
    </div>
    <a role="button" class="navbar-burger">
    ...
    </a>
</div>

Example: The below example shows the use of the navbar-brand class in Bulma. In the output below, the navbar-brand has a primary background color.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <link rel='stylesheet' href= 

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 

    <style> 

        .navbar { 

            margin-top: 20px; 

            padding: 10px; 

        } 

    </style> 

</head> 

<body class="has-text-centered has-navbar-fixed-bottom"> 

    <h1 class="is-size-2 has-text-success"> 

      GeeksforGeeks 

    </h1> 

    <b class="is-size-4">Bulma Navbar Brand</b> 

    <div class="container"> 

        <nav class="navbar is-transparent"> 

              <!-- Navbar Brand -->

            <div class="navbar-brand has-background-primary"> 

                <a class="navbar-item" 

                   href="https://geeksforgeeks.org"> 

                    <img src= 

"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png"> 

                </a> 

                <div class="navbar-burger" 

                     data-target="nav1"> 

                    <span></span> 

                    <span></span> 

                    <span></span> 

                </div> 

            </div> 

            <div id="nav1" class="navbar-menu"> 

                <div class="navbar-start"> 

                    <a class="navbar-item" href="#"> 

                        Home 

                    </a> 

                    <a class="navbar-item" href="#"> 

                        Practice 

                    </a> 

                </div> 

                <div class="navbar-end"> 

                    <div class="navbar-item"> 

                        <div class="field is-grouped"> 

                            <p class="control"> 

                                <button class="button is-info"> 

                                    Algorithms 

                                </button> 

                            </p> 

                            <p class="control"> 

                                <button class="button  

                                    is-info is-outlined"> 

                                    Data Structures 

                                </button> 

                            </p> 

                        </div> 

                    </div> 

                </div> 

            </div> 

        </nav> 

    </div> 

</body> 

</html>

Output:

Bulma Navbar brand

Reference: https://bulma.io/documentation/components/navbar/#navbar-brand

Article Tags :

CSS

Web Technologies

Bulma

Bulma-Components