Bulma Navbar Variables

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

A navbar is a horizontal navigation bar that has navbar items, buttons, dropdown menus, etc.

Classes Used:

• navbar: It is the main component.
• navbar-brand: We can place the logo using this class.
• navbar-burger: It is also called the hamburger icon in the left corner of the navbar.
• navbar-menu: The right part of the screen is visible only in desktop mode.
• navbar-item: Items in the navigation bar are shown using this class.
• navbar-link: This class is used to set the links to other routes.
• navbar-dropdown: This class is used to set the dropdown menu.
• navbar-divider: This class is used to set the horizontal line that can separate the navbar items from each other.

Variable Used: 

Name	Description	Type	Value	Computed Value	Computed Type
$navbar-background-color	This provides color to the background.	variable	$scheme-main	hsl(0, 0%, 100%)	color
$navbar-box-shadow-size	This variable is used to define the size of the shadow of the navbar.	size	0 2px 0 0
$navbar-box-shadow-color	This variable is used to define the color of the shadow of the navbar.	variable	$background	hsl(0, 0%, 96%)	color
$navbar-height	This variable is used to define the height of the navbar.	size	3.25rem
$navbar-padding-vertical	This variable is used to define the vertical padding on the navbar.	size	1rem
$navbar-padding-horizontal	This variable is used to define the horizontal padding on the navbar.	size	2rem
$navbar-z	This variable is used to define the level on which you want to place your navbar.	string	30
$navbar-fixed-z	This variable is used to define the fixed level of the navbar.	string	30
$navbar-item-color	This variable is used to define the color of the item on the navbar.	variable	$text	hsl(0, 0%, 29%)	color
$navbar-item-hover-color	This variable is used to define the color of the item on the navbar on hover.	variable	$link	hsl(229, 53%,  53%)	color
$navbar-item-hover-background-color	This variable is used to define the background color of the item on the navbar on hover.	variable	$scheme-main-bis	hsl(0, 0%, 98%)	color
$navbar-item-active-color	This variable is used to provide color to the active items only.	variable	$scheme-invert	hsl(0, 0%, 4%)	color
$navbar-item-active-background-color	This variable is used to provide the background color to the active item of the navbar on hover.	string	transparent
$navbar-item-img-max-height	This variable is used to provide the max height of the image in the navbar.	size	1.75rem
$navbar-burger-color	This variable is used to provide color to the burger of the navbar.	variable	$navbar-item-color
$navbar-tab-hover-background-color	This variable is used to provide background-color to the navbar tab on hover.	string	transparent
$navbar-tab-hover-border-bottom-color	This variable is used to provide color to the bottom border of the navbar tab on hover.	variable	$link	hsl(229, 53%,  53%)	color
$navbar-tab-active-color	This variable is used to provide color to the active navbar tabs.	variable	$link	hsl(229, 53%,  53%)	color
$navbar-tab-active-background-color	This variable is used to provide background color to the active tabs of the navbar.	string	transparent
$navbar-tab-active-border-bottom-color	This variable is used to provide color to the active bottom border of the navbar.	variable	$link	hsl(229, 53%,  53%)	color
$navbar-tab-active-border-bottom-style	This variable is used to define style to the active bottom border.	string	solid
$navbar-tab-active-border-bottom-width	This variable is used to define the width of the active bottom part of the border.	size	3px
$navbar-dropdown-background-color	This variable is used to define the background color of the dropdown menu of the navbar.	variable	$scheme-main	hsl(0, 0%, 100%)	color
$navbar-dropdown-border-top	This variable is used to provide the border-top effect on the dropdown menu of the navbar.	size	2px solid $border
$navbar-dropdown-offset	This variable is used to provide the offset effect on the dropdown menu of the navbar.	size	-4px
$navbar-dropdown-arrow	This variable is used to provide an arrow effect on the dropdown menu of the navbar.	variable	$link	hsl(229, 53%,  53%)	color
$navbar-dropdown-radius	This variable is used to provide the radius effect on the dropdown menu of the navbar.	variable	$radius-large	6px	size
$navbar-dropdown-z	This variable is used to define the level of your element on the webpage.	string	20
$navbar-dropdown-boxed-radius	This variable is used to provide the boxed radius effect on the dropdown menu of the navbar.	variable	$radius-large	6px	size
$navbar-dropdown-boxed-shadow	This variable is used to provide the boxed shadow effect on the dropdown menu of the navbar.	shadow	0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1)
$navbar-dropdown-item-hover-color	This variable is used to provide the color to the dropdown menu of the navbar.	variable	$scheme-invert	hsl(0, 0%, 4%)	color
$navbar-dropdown-item-hover-background-color	This variable is used to provide background color to the item of the navbar on hover.	variable	$background	hsl(0, 0%, 96%)	color
$navbar-dropdown-item-active-color	This variable is used to provide the color to the active item of the dropdown menu.	variable	$link	hsl(229, 53%,  53%)	color
$navbar-dropdown-item-active-background-color	This variable is used to provide a background color to the active item of the dropdown menu.	variable	$background	hsl(0, 0%, 96%)	color
$navbar-divider-background-color	This variable is used to provide the background color to the divider of the navbar.	variable	$background	hsl(0, 0%, 96%)	color
$navbar-divider-height	This variable is used to provide height to the divider of the navbar.	size	2px
$navbar-bottom-box-shadow-size	This variable is used to provide the size of the box shadow of the navbar.	size	0 -2px 0 0
$navbar-breakpoint	This variable is used to provide the breakpoint of the navbar when we decrease or increase the size of the screen.	variable	$desktop	960px + (2 * $gap)	computed
$navbar-colors	This variable is used to define the color of the navbar.	variable	$colors	Bulma colors	map

Syntax:

<nav class="navbar">
   <div class="...">
       ...
   </div>
</nav>

 Syntax of variable:

$property-name: property-value;

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the navbar.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bulma Variable</title>
    <link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>

    <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>
    <link rel="stylesheet" href="style.css">

    <style>
        .title{
            color:green;
        }
        nav{
            margin-left:200px;
            margin-right:200px;
        }
    </style>
</head>

<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
        A computer science portal for geeks.
    </h3>
    <nav class="navbar">
        <div class="navbar-menu">
            <a class="navbar-item">
              Menu 1
            </a>
            <a class="navbar-item">
              Menu 2
            </a>
            <a class="navbar-item">
               Menu 3
            </a>
            <a class="navbar-item">
               Menu 4
            </a>
            <a class="navbar-item">
               Menu 5
            </a>
            <a class="navbar-item">
               Menu 6
            </a>
        </div>
    </nav>
</body>
</html>

SCSS Code:

$navbar-colors: lightgreen;
.navbar{
    background-color:$navbar-colors;
}

Compiled CSS Code:

.navbar {
    background-color: lightgreen; 
}

Output:

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the navbar.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bulma Variable</title>
    <link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>

    <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>
    <link rel="stylesheet" href="style.css">

    <style>
        .title{
            color:green;
        }
        nav{
            margin-left:200px;
            margin-right:200px;
        }
    </style>
</head>

<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
        A computer science portal for geeks.
    </h3>
    <nav class="navbar">
        <div class="navbar-menu">
            <a class="navbar-item">
              Menu 1
            </a>
            <a class="navbar-item">
              Menu 2
            </a>
            <a class="navbar-item">
               Menu 3
            </a>
            <a class="navbar-item">
               Menu 4
            </a>
            <a class="navbar-item">
               Menu 5
            </a>
            <a class="navbar-item">
               Menu 6
            </a>
        </div>
    </nav>
</body>
</html>

SCSS Code:

$navbar-colors: green;
.navbar-item{
    color:$navbar-colors;
}

Compiled CSS Code:

.navbar-item {
    color: green;
}

Output:

Reference: https://bulma.io/documentation/components/navbar/