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,
%3csvg xmlns='http://www.w3.org/2000/svg'
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,
%3csvg xmlns='http://www.w3.org/2000/svg'
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="./custom.css">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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:
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,
%3csvg xmlns='http://www.w3.org/2000/svg'
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,
%3csvg xmlns='http://www.w3.org/2000/svg'
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="./custom.css">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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:
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#sass
Similar Reads
Bootstrap 5 Navbar Supported Content Bootstrap 5 Navbar Supported content contains Navbar which supports various sub-components like .navbar-brand, .navbar-nav, .navbar-text, .navbar-toggler, and .navbar-scroll. Brand: It is a company, project, or product name. We add .navbar-brand to various components like a heading or a link. We can
2 min read
Bootstrap 5 Navbar Brand Bootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar. It may contain an image logo or text, etc. A Navbar helps readers in selecting topics, links, or sub-topics of their interest. Bootstrap 5 Navbar Brand: Text: The text in the user interface is added
3 min read
Bootstrap 5 Navbar Brand Text A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Navbar Brand Text is used to add text in place of the brand logo. We can write text or links using the nav
2 min read
Bootstrap Navbar Brand Image Bootstrap Navbar Brand Image is used to put the image inside of a navbar, a navigation bar component in the Bootstrap framework. It typically appears at the top of a webpage, serving as a visual identifier for the website or application and linking back to the homepage. Pre-requisite: To use images
2 min read
Bootstrap 5 Navbar Brand Image and Text Bootstrap 5 Navbar Brand Image and text are used to create a navbar that holds the image and text within it. A navbar can have only text, only image or both a few times you can see buttons on navbar to navigate things. Bootstrap 5 Navbar Brand Image and text used classes: There are no specific class
2 min read
Bootstrap 5 Navbar Nav Bootstrap 5 Navbar Nav simplifies navigation creation by grouping navigation links within a container element with the nav class. Use nav-item for each link and nav-link for styling. Customize with optional classes like "active" for the current page. Bootstrap 5 Navbar Nav class: There is no specifi
2 min read
Bootstrap 5 Navbar Forms Bootstrap 5 Navbar Forms are used to create the components like a search bar, or login within a navbar. Bootstrap 5 Navbar Forms Classes: No special classes are used in Navbar Forms. You can customize the form using Navbar and Form classes Syntax: <nav class="navbar"> <form> <input cl
2 min read
Bootstrap 5 Navbar Text Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination. Navbar Text Class: navbar-text
2 min read
Bootstrap 5 Navbar Color Schemes Bootstrap 5 Navbar Color schemes is used to customize a navbar using navbar light and dark themes, along with background color utilities. Bootstrap 5 Navbar Color schemes Classes: No special classes are used in Navbar Color schemes. We have an article on the Background colors that can be used to giv
2 min read
Bootstrap 5 Navbar Containers The container layout can define the main frame of the page using header, content, sidebar, and footer components. We can also add a navbar at the top of the webpage using the container navbar component. This is not that important but you can wrap up the nav bar in a container to center it on a page
2 min read