Bootstrap 5 Navbar SASS can be used to change the default values provided for the navigation bar by customizing scss file of bootstrap 5.
SASS variables of Navbar:
- $navbar-padding-y: This variable provides the top and bottom padding of the navigation bar. By default, it is 0.5rem.
- $navbar-padding-x: This variable provides the left and right padding of the navigation bar. By default, it is null.
- $navbar-nav-link-padding-x: This variable provides left and right padding of the navigation links in the navigation bar. By default, it is 0.5rem.
- $navbar-brand-font-size: This variable provides the font size of the brand in the navigation bar. By default, it is 1.25rem.
- $nav-link-height: This variable provides the height of the navigation link in the navigation bar. By default, it is 4rem.
- $navbar-brand-height: This variable provides the height of the brand in the navigation bar. By default, it is 1.875rem.
- $navbar-brand-padding-y: This variable provides the top and bottom padding of the brand in the navigation bar. By default, it is 1.06rem.
- $navbar-brand-margin-end: This variable provides the end margin of the brand in the navigation bar. By default, it is 1rem.
- $navbar-toggler-padding-y: This variable provides the top and bottom padding of the toggler in the navigation bar. By default, it is 0.25rem.
- $navbar-toggler-padding-x: This variable provides the left and right padding of the toggler in the navigation bar. By default, it is 0.75rem.
- $navbar-toggler-font-size: This variable provides the font size of the toggler in the navigation bar. By default, it is 1.25rem.
- $navbar-toggler-border-radius: This variable provides the border radius of the toggler in the navigation bar. By default, it is 0.375rem.
- $navbar-toggler-focus-width: This variable provides the width of the toggler on focus in the navigation bar. By default, it is 0.25rem.
- $navbar-toggler-transition: This variable provides the transition of the toggler in the navigation bar. By default, the transition duration of the box shadow is 0.15 seconds with the transition timing function as ‘ease-in-out’.
- $navbar-dark-color: This variable provides the text color of the dark navigation bar. By default, it is a white color with an opacity of 0.55.
- $navbar-dark-hover-color: This variable provides the text color of the dark navigation bar on hover. By default, it is a white color with an opacity of 0.75.
- $navbar-dark-active-color: This variable provides the text color of the active navigation item on the navigation bar. By default, it is white in color.
- $navbar-dark-disabled-color: This variable provides the text color of the dark navigation bar which is disabled. By default, it is white color with an opacity of 0.25.
- $navbar-dark-toggler-icon-bg: This variable provides the icon of the toggler on the navigation bar. By default, an url of the icon is set.
- $navbar-dark-toggler-border-color: This variable provides the border color of the toggler in the dark navigation bar. By default, it is white color with an opacity of 0.1
- $navbar-light-color: This variable provides the text color of the light navigation bar. By default, it is black color with an opacity of 0.55.
- $navbar-light-hover-color: This variable provides the text color of the light navigation bar on hover. By default, it is black color with an opacity of 0.7
- $navbar-light-active-color: This variable provides the text color of the active navigation item on the light navigation bar. By default, it is black color with an opacity of 0.9
- $navbar-light-disabled-color: This variable provides the text color of the disabled light navigation bar. By default, it is black color with an opacity of 0.3
- $navbar-light-toggler-icon-bg: This variable provides the icon of the toggler on the navigation bar. By default, an url of the icon is set.
- $navbar-light-toggler-border-color: This variable provides the border color of the toggler in the light navigation bar. By default, it is black color with an opacity of 0.1
- $navbar-light-brand-color: This variable provides the text color of the brand on the light navigation bar. By default, it is black color with an opacity of 0.9
- $navbar-light-brand-hover-color: This variable provides the text color of the brand on hover on the light navigation bar. By default, it is black color with an opacity of 0.9
- $navbar-dark-brand-color: This variable provides the text color of the brand on the dark navigation bar. By default, it is white color.
- $navbar-dark-brand-hover-color: This variable provides the text color of the brand on hover on the dark navigation bar. By default, it is white color.
Steps to override scss of Bootstrap:
Step 1: Install bootstrap using the following command:
npm i bootstrap
Step 2: Create your custom scss file and write the variable you want to override. Then include the bootstrap scss file using import.
$class_to_override: values; @import "node_modules/bootstrap/scss/bootstrap"
Step 3: Convert the file to CSS using a live server extension.
Step 4: Include the converted scss file to your HTML after the link tag of Bootstrap CSS
Project Structure: The custom scss file name is “custom.scss” and “custom.css” is converted file
Syntax:
$variable:value; @import "./node_modules/bootstrap/scss/bootstrap"
Example 1: In this example, we make use of some of the above Navbar SASS variables.
custom.scss
CSS
$navbar-padding-y:2rem;
$navbar-padding-x:3rem;
$navbar-nav-link-padding-x:2rem;
$navbar-brand-font-size: 1.7rem;
$navbar-brand-padding-y:1.2rem;
$navbar-toggler-padding-y:1rem;
$navbar-toggler-padding-x:2rem;
$navbar-toggler-font-size:2rem;
$navbar-toggler-border-radius:2rem;
$navbar-toggler-focus-width:2rem;
$navbar-toggler-transition:box-shadow 3s ease-in;
$navbar-dark-color:white;
$navbar-dark-hover-color:black;
$navbar-dark-active-color:black;
$navbar-dark-disabled-color:rgb(93, 182, 133);
$navbar-dark-toggler-border-color:white;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
CSS
.navbar { --bs-navbar-padding-x: 3rem;
--bs-navbar-padding-y: 2rem;
--bs-navbar-color: rgba(0, 0, 0, 0.55);
--bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
--bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
--bs-navbar-active-color: rgba(0, 0, 0, 0.9);
--bs-navbar-brand-padding-y: 1.2rem;
--bs-navbar-brand-margin-end: 1rem;
--bs-navbar-brand-font-size: 1.7rem;
--bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
--bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
--bs-navbar-nav-link-padding-x: 2rem;
--bs-navbar-toggler-padding-y: 1rem;
--bs-navbar-toggler-padding-x: 2rem;
--bs-navbar-toggler-font-size: 2rem;
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,
viewBox='0 0 30 30'%3e%3cpath
stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
--bs-navbar-toggler-border-radius: 2rem;
--bs-navbar-toggler-focus-width: 2rem;
--bs-navbar-toggler-transition: box-shadow 3s ease-in;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
} .navbar-dark { --bs-navbar-color: white;
--bs-navbar-hover-color: black;
--bs-navbar-disabled-color: rgb(93, 182, 133);
--bs-navbar-active-color: black;
--bs-navbar-brand-color: black;
--bs-navbar-brand-hover-color: black;
--bs-navbar-toggler-border-color: white;
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,
viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
} |
index.html:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Navbar SASS</title>
<link href=
rel="stylesheet">
<link rel="stylesheet" href="./custom.css">
<script src=
</script>
<script src=
</script>
</head>
<body class="text-center">
<div class="container">
<h1 class="text-success">GeeksforGeeks</h1>
<div class="container" style="width:850px;">
<nav class="navbar navbar-expand-sm bg-success
navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">
Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Videos</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">
Index</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-success
navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Brand Logo</a>
</div>
</nav>
<h5>Toggler</h5>
<nav class="navbar navbar-expand-xxl bg-success
navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Subjects</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Maths</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Science</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
|
Output:
Output
Example 2: In this example, we make use of some of the above Navbar SASS variables.
custom.scss
CSS
$navbar-light-color:green;
$navbar-light-hover-color:black;
$navbar-light-active-color:black;
$navbar-light-disabled-color:rgb(136, 228, 136);
$navbar-light-brand-color:green;
$navbar-light-brand-hover-color: black;
$navbar-dark-brand-color:white;
$navbar-dark-brand-hover-color:black;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
CSS
.navbar { --bs-navbar-padding-x: 0;
--bs-navbar-padding-y: 0.5rem;
--bs-navbar-color: green;
--bs-navbar-hover-color: black;
--bs-navbar-disabled-color: rgb(136, 228, 136);
--bs-navbar-active-color: black;
--bs-navbar-brand-padding-y: 0.3125rem;
--bs-navbar-brand-margin-end: 1rem;
--bs-navbar-brand-font-size: 1.25rem;
--bs-navbar-brand-color: green;
--bs-navbar-brand-hover-color: black;
--bs-navbar-nav-link-padding-x: 0.5rem;
--bs-navbar-toggler-padding-y: 0.25rem;
--bs-navbar-toggler-padding-x: 0.75rem;
--bs-navbar-toggler-font-size: 1.25rem;
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,
viewBox='0 0 30 30'%3e%3cpath stroke='green' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
--bs-navbar-toggler-border-radius: 0.375rem;
--bs-navbar-toggler-focus-width: 0.25rem;
--bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
} .navbar-dark { --bs-navbar-color: rgba(255, 255, 255, 0.55);
--bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
--bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
--bs-navbar-active-color: #fff;
--bs-navbar-brand-color: white;
--bs-navbar-brand-hover-color: black;
--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,
viewBox='0 0 30 30'%3e%3cpath
stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
} |
index.html:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Navbar SASS</title>
<link href=
rel="stylesheet">
<link rel="stylesheet" href="./custom.css">
<script src=
</script>
<script src=
</script>
</head>
<body class="text-center">
<div class="container">
<h1 class="text-success">GeeksforGeeks</h1>
<h5 class="text-success">Bootstrap 5 Navbar SASS</h5>
<div class="container pt-3" style="width:850px;">
<h6>Navbar light</h6>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Videos</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Index</a>
</li>
</ul>
</div>
</nav>
<br>
<h6>Dark Brand</h6>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand Logo</a>
</div>
</nav>
<br>
<h6>Light Brand</h6>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand Logo</a>
</div>
</nav>
</div>
</div>
</body>
</html>
|
Output:
Output
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#sass