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.
