Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Navbar
Examples and documentation for the navbar, a potent and adaptable navigation header from UX4G supports our collapse plugin as well as branding, navigation, and other features.
How it works #
Here's what you need to know before getting started with the navbar:
-
Navbars need to be wrapped.navbar with the classes
.navbar-expand{sm|-md|-lg|-xl|-xxl}for responsive collapsing. - Navbars and the items they contain are by default fluid. The container can be modified to limit their horizontal width in many ways.
- To manage spacing and alignment within navbars, use the utility classes for spacing and flex.
- By default, navbars are responsive, but developers can simply change that. Dependent on the Collapse JavaScript plugin for responsive behavior.
-
Make sure the site is accessible by using a nav element or, if using a more generic element like a div, by adding a
role="navigation" to each navbar to expressly indicate it as a landmark area for people using assistive technologies. -
Use
aria-current="page"to indicate the current page or aria-current="true" to indicate the current item in a set. -
.navbar-lighthas been deprecated and.navbarcan now be themed with CSS variables that are scoped to the.navbarbase class. Instead of adding more styles, navbar-dark has been rewritten to override CSS variables.E402
prefers-reduced-motion media query. See the reduced motion section of our accessibility
documentation.
Supported content #
For use with our collapse plugin and other navigation toggling behaviors, see .navbar-toggler.
- Utilities for flex and spacing for all form actions and controls.
- For adding vertically centered text strings, use .navbar-text.
- For grouping and hiding navbar contents by a parent breakpoint, use .collapse.navbar-collapse.
- Include an optional.To establish a maximum height and scroll expanding navbar content, use
navbar-scroll.
Here is an illustration of every sub-component present in a responsive navbar with a light theme that collapses at the lg (big) breakpoint.
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"/></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>RESULT
This example uses background
(bg-light) and spacing
(me-auto, mb-2, mb-lg-0, me-2) utility classes.
Brand #
The majority of items can be given the .navbar-brand, but an anchor is recommended because some elements could need utility classes or unique styles.
Text #
Add your text within an element with the
.navbar-brand class.
<!-- As a link -->
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>RESULT
Image #
You can replace the text within the .navbar-brand
with an img.
<nav class="navbar bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://doc.ux4g.gov.in/assets/img/logo/ux-emblem-logo.svg" alt="UX4G" width="30" height="24">
</a>
</div>
</nav>RESULT
Image and text #
Utilize some additional tools to add both text and an image simultaneously. Keep in mind that the image now has the styles .d-inline-block and .align-text-top.
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="https://doc.ux4g.gov.in/assets/img/icon/ux4g-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
UX4G
</a>
</div>
</nav>RESULT
Nav #
With their own modifier class and a foundation built on our .nav choices, navbar navigation links need toggler classes to be properly responsively styled. To keep the navbar contents properly aligned, navigation in navbars will also expand to take up as much horizontal space as possible.
To show the current page, add the .active class to .nav-links.
Please be aware that the active.nav-link should also have the aria-current attribute included.
RESULT
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
RESULT
Dropdowns are another option for the navbar. utilize distinct and nested elements for .nav-item and .nav-link as seen below. Dropdown menus need a wrapping element for positioning, so make sure to utilize that.
RESULT
Forms #
Place various form controls and components within a navbar:
RESULT
Immediately youthful components of default setting for the .navbar's justify-content: space-between is flex layout. To modify this behavior, use extra flex utilities as necessary.
RESULT
Group input also functions. Use the form element as the container and save some HTML if the navbar is entirely or primarily made up of forms.
RESULT
These navbar forms also support a variety of buttons. This serves as a nice reminder that various sized items can be aligned using vertical alignment utilities.
RESULT
Text #
With the aid of .navbar-text, text fragments can be included in navbars. For text strings, this class modifies the vertical alignment and horizontal spacing.
RESULT
Mix and match with other components and utilities as needed.
RESULT
Color schemes #
.navbar-light has been deprecated and CSS variables are now used to power navbar theming. When applied to .navbar, CSS variables apply by default, giving it a "light" appearance that can be overridden with .navbar-dark.
Thanks to the combination of Sass and CSS variables used by UX4G, navbar themes are now simpler than before. Developers can apply, however the default is our "light navbar" for use with light backdrop colors .navbar-dark is for backgrounds with dark colors. Then use .bg-* utilities to modify.
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>Containers #
Developers can center a navigation bar on a page by wrapping it with a .container, albeit it's not necessary. However, an inner container is still necessary. Alternately, developers can include a container inside the .navbar to just center the items in a top navbar that is fixed or static.
RESULT
Use any of the responsive containers to change how wide the content in your navbar is presented.
RESULT
Placement #
To position navbars in non-static locations, use the position tools. Select from stickied to the top (scrolls with the page until it reaches the top, then stays there), stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there), fixed to the top, or fixed to the bottom.
Fixed navbars employ the CSS property position: fixed, which means they are withdrawn from the DOM's usual flow and may need additional styling (such as padding-top on the <body>) to avoid overlapping with other elements.
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
<nav class="navbar sticky-bottom bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
</nav>
Scrolling #
To enable vertical scrolling within the toggleable contents of a collapsed navbar, add .navbar-nav-scroll to .navbar-nav (or any navbar sub-component). With the local CSS custom option --bs-navbar-height or custom styles, developers can change the default scrolling threshold of 75vh (or 75% of the viewport height). When the navbar is enlarged at larger viewports, the content will show up as it would in a standard navbar.
Please be aware that this behavior may have an overflow disadvantage since when overflow-x is set to auto, which will crop some horizontal content when overflow-y is set to auto (which is necessary to scroll the text in this case).
Here is a navbar using an example.With additional margin utilities for the best spacing, use navbar-nav-scroll with styles="--bs-scroll-height: 100px;".
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" styles="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"/></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>RESULT
Responsive behaviors #
Navbars can use .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their content collapses behind a button. In combination with other utilities, developers can easily choose when to show or hide particular elements.
Add the .navbar-expand class to navbars that don't ever collapse. Don't add any .navbar-expand classes to navbars that always collapse.
Toggler #
By default, navbar togglers are positioned to the left, but if they follow a sister element, such as .navbar-brand, they will be placed to the extreme right. The toggler's position will be reversed if your markup is reversed. Examples of several toggle styles are provided below.
.navbar-brand is not displayed at the smallest breakpoint:
RESULT
With a brand name shown on the left and toggler on the right:
RESULT
With a toggler on the left and brand name on the right:
RESULT
External content #
When content is physically outside of the .navbar, you may want to utilize the collapse plugin to activate a container element. That's simple to do because the plugin relies on id and data-bs-target matching!
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-white">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>RESULT
It is advisable to add further JavaScript to this so that when the container is opened, the focus will be moved programmatically to the container. If the container that was opened appears before the toggler in the document's structure, keyboard users and people using assistive technologies may have trouble accessing the newly disclosed content. Additionally, it is advised to ensure that the toggler has the aria-controls property set to the content container's id. Theoretically, this enables users of assistive technology to navigate directly from the toggler to the container it manages, although implementation is still somewhat sporadic.
Offcanvas #
Use the offcanvas component to convert the expanding and collapsing navbar into an offcanvas drawer. Use and also expand the offcanvas default styles. To construct a dynamic and adaptable navigation sidebar, use the navbar-expand-* classes.
In the example below, completely omit the .navbar-expand-* class to get an offcanvas navbar that is always collapsed across all breakpoints.
<nav class="navbar bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
Use to build an off-canvas navigation bar that turns into a regular one at a particular breakpoint, such as lg .navbar-expand-lg.
Be aware that if you use offcanvas in a dark navbar, the offcanvas content may require a dark background to prevent the text from becoming unreadable. In the example below, for a suitable style with a dark offcanvas, we add .navbar-dark and .bg-dark to the .navbar, .text-bg-dark to the .offcanvas, .dropdown-menu-dark to the .dropdown-menu, and .btn-close-white to the .btn-close.
<nav class="navbar navbar-expand-lg bg-light fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
...
</div>
</nav>Accessibility Bar #
<div class="header-top px-2">
<div class="row">
<div class="col-xl-6 col-lg-3 d-flex col-sm-6 col-6 align-items-left">
<span class="goi"><a href="https://www.india.gov.in/" target="_blank" class="goi"><img src="https://doc.ux4g.gov.in/assets/img/icon/in-flag.png" class="img-fluid" alt="indian flag" loading="lazy"><strong>Government of
India</strong></a></span>
</div>
<div class="col-xl-6 col-lg-9 col-sm-6 col-6 text-end">
<span class=" d-none d-md-inline">
<button role="button" id="btn-decrease" class="font01" onclick="decrease()">
-A
</button>
<button role="button" id="btn-orig" class="font01 active01" onclick="reset()">
A
</button>
<button role="button" id="btn-increase" class="font01" onclick="increase()">
A+
</button><span class="partition">|</span>
</span>
<span class="light_dark_icon">
<input type="checkbox" class="light_mode" id="checkbox">
<label for="checkbox" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<span class="ball"></span>
</label>
</span>
<span class="language01">
<form id="langForm" method="POST">
<i class="fal fa-globe"></i>
<select name="language" id="changeLang" onchange="OnSelectedIndexChange()">
<option value="" selected="" disable="">Language</option>
<option value="en">English</option>
</select>
</form>
</span>
</div>
</div>
</div>
</div>
RESULT
Navbar Government Website #
<header>
<div class="header-top px-2">
<div class="row">
<div class="col-xl-6 col-lg-3 d-flex col-sm-6 col-6 align-items-left">
<span class="goi"><a href="https://www.india.gov.in/" target="_blank" class="goi"><img src="https://doc.ux4g.gov.in/assets/img/icon/in-flag.png" class="img-fluid" alt="indian flag" loading="lazy"><strong>Government of
India</strong></a></span>
</div>
<div class="col-xl-6 col-lg-9 col-sm-6 col-6 text-end">
<span class=" d-none d-md-inline">
<button role="button" id="btn-decrease" class="font01" onclick="decrease()">
-A
</button>
<button role="button" id="btn-orig" class="font01 active01" onclick="reset()">
A
</button>
<button role="button" id="btn-increase" class="font01" onclick="increase()">
A+
</button><span class="partition">|</span>
</span>
<span class="light_dark_icon">
<input type="checkbox" class="light_mode" id="checkbox">
<label for="checkbox" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<span class="ball"></span>
</label>
</span>
<span class="language01">
<form id="langForm" method="POST">
<i class="fal fa-globe"></i>
<select name="language" id="changeLang" onchange="OnSelectedIndexChange()">
<option value="" selected="" disable="">Language</option>
<option value="en">English</option>
</select>
</form>
</span>
</div>
</div>
</div>
<div id="header-sticky" class="header-area shadow-sm header-white px-2 pt-2 pb-2 mt-sm-0">
<div class="nav_custom d-flex align-items-center pl-15 pr-15">
<div class="logo">
<a href="">
<img src="https://doc.ux4g.gov.in/assets/img/logo/national-emblem.png" alt="ux4g logo" loading="lazy">
<img src="https://doc.ux4g.gov.in/assets/img/logo/company-logo.png" alt="ux4g logo" loading="lazy">
</a>
<a href="https://www.g20.in/en/" target="_blank">
<img class="g20_logo" src="https://doc.ux4g.gov.in/assets/img/logo/g20-summit.png" alt="g20" loading="lazy" style="margin-left: 10px; margin-right: 30px;">
</a>
</div>
<nav class="navbar flex-grow-1 navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContentGov" aria-controls="navbarSupportedContentGov" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContentGov">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
item1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">item1</a></li>
<li><a class="dropdown-item" href="#">item2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
item2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">item1</a></li>
<li><a class="dropdown-item" href="#">item2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
item3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">item1</a></li>
<li><a class="dropdown-item" href="#">item2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
item4
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">item1</a></li>
<li><a class="dropdown-item" href="#">item2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<span class="gap-3 d-flex float-end">
<button class="btn btn-outline-primary d-none d-sm-block">Sign in</button>
<button class="btn btn-primary d-none d-sm-block">Sign up</button>
</span>
</div>
</div>
</header>
Some additional Js to increase and decrease the text size
<script>
var $affectedElements = $("li, p, h1, h2, h3, h4, h5, h6"); // Can be extended, ex. $("div, p, span.someClass")
// Storing the original size in a data attribute so size can be reset
$affectedElements.each( function(){
var $this = $(this);
$this.data("orig-size", $this.css("font-size") );
});
$("#btn-increase").click(function(){
changeFontSize(1);
})
$("#btn-decrease").click(function(){
changeFontSize(-1);
})
$("#btn-orig").click(function(){
$affectedElements.each( function(){
var $this = $(this);
$this.css( "font-size" , $this.data("orig-size") );
});
})
function changeFontSize(direction){
$affectedElements.each( function(){
var $this = $(this);
$this.css( "font-size" , parseInt($this.css("font-size"))+direction );
});
}
</script>
Additional Js to change theme from light to dark mode
<script>
const checkbox = document.getElementById("checkbox");
const isDarkMode = localStorage.getItem("darkMode") === "true";
checkbox.checked = isDarkMode;
const toggleDarkMode = () => {
const isDarkMode = checkbox.checked;
document.body.classList.toggle("dark", isDarkMode);
localStorage.setItem("darkMode", isDarkMode);
};
checkbox.addEventListener("change", toggleDarkMode);
toggleDarkMode();
</script>
RESULT
CSS #
Variables #
Added in v1.0.1Navbars now employ local CSS variables on .navbar as part of UX4G's expanding approach to CSS variables for improved real-time customisation. Sass is used to set the values for the CSS variables, therefore Sass customization is still available.
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
Some additional CSS variables are also present on
.navbar-nav:
--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
Sass variables #
$navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow .15s ease-in-out;
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;Sass loop #
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
.offcanvas {
// stylelint-disable declaration-no-important
position: static;
z-index: auto;
flex-grow: 1;
width: auto !important;
height: auto !important;
visibility: visible !important;
background-color: transparent !important;
border: 0 !important;
transform: none !important;
@include box-shadow(none);
@include transition(none);
// stylelint-enable declaration-no-important
.offcanvas-header {
display: none;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}
}