Navbar
Documenta et exempla pro Bootstrap potens, caput navigationis responsive, navbarum. Auxilia ad notationem, navigationem, et plura includit, etiam subsidium pro plugin ruinae nostrae.
Quomodo facitur
Ecce id quod debes scire antequam cum navbar incepit:
- Navbars involucrum requirunt
.navbar
cum classibus labentis et colori.navbar-expand{-sm|-md|-lg|-xl|-xxl}
dociles . - Navbars et earum contenta per defaltam fluida sunt. Continentem variat, ut earum latitudinem horizontalem diversimode finiat.
- Nostris spatiis et flectibus utere utilibus generibus ad spatiis et alignment intra navbarum moderandis .
- Navbars per defaltam respondeant, sed eas facile mutare potes. Mores responsabilitatis a nostro Collapse JavaScript plugin pendet.
- Admitte accessibilitatem utendo
<nav>
elemento vel, si utens elementum magis genericum quale est<div>
, omnibus navbaris addererole="navigation"
ad eam ut regionem technologiarum assistivam usoribus expresse recognoscendam. - Praesens item indicare utendo
aria-current="page"
ad paginam hodiernam velaria-current="true"
ad hodiernam item in statuto.
prefers-reduced-motion
interrogatione instrumentorum. Videre
motum sectionem accessibilitatis nostrae documentationis reductam .
Supported content
Navbars cum paucis subiunctis aedificato in subsidium veniunt. Elige ex his ut opus fuerit:
.navbar-brand
pro tuo comitatu, productum, vel project nomine..navbar-nav
ad plenam altitudinem et levem navigationem (auxilium pro stillicidiis includens)..navbar-toggler
ad usum cum ruina nostra plugin et aliae rationes navigationis toggling .- Utilitas flex et spatiorum ad quamlibet formam controllata et actiones.
.navbar-text
addendo perpendiculariter chordas textus..collapse.navbar-collapse
ad copulam et latebras navbar contenta a parente breakpoint..navbar-scroll
Libitum addere ad rationem navbaris contentummax-height
et volumen ampliatum .
Exemplum hic omnium sub-componentium inclusarum in nave responsivo levi lemmate quae sponte in lg
breakpoint (magna) concidit.
<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<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>
Hoc exemplum background ( bg-light
) utitur et spatio ( my-2
, my-lg-0
, ) me-sm-0
utilitatis my-sm-0
genere.
Brand
Applicari .navbar-brand
potest pluribus elementis, sed anchora opera optima, ut quaedam elementa utilitatis generum vel stylorum consuetudinum requirant.
Textum
Textum tuum intra elementum cum .navbar-brand
classe adde.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
Image
Textum intra .navbar-brand
cum an <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
Imago et text
Uti etiam aliquibus adiectis utilitatibus uti potes simul imaginem et textum addere. Nota additam .d-inline-block
et .align-text-top
a <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Nav
Navbar navigationis nexus in .nav
optiones nostras aedificant cum suo proprio genere determinativo et usum toggler classium requirunt ad stylum proprium respondendi. Navigatio in navbaribus crescet etiam ad spatium horizontale occupandum quam maxime ad contenta navbarum tutanda conservanda.
Classem adde in .active
pagina .nav-link
pagina indicanda.
Nota quaeso quod tibi quoque aria-current
attributum in activo addas .nav-link
.
<nav class="navbar navbar-expand-lg navbar-light 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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Et quia classibus nostris utimur navigiis, potes indicem substructum omnino accedere, si lubet.
<nav class="navbar navbar-expand-lg navbar-light 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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
Etiam stillicidiis uti in navbaribus tuis potes. Menus dropdown requirunt elementum involuti pro positione, ita scito uti elementis separatis et nidificatis pro .nav-item
et .nav-link
ut infra ostendetur.
<nav class="navbar navbar-expand-lg navbar-light 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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Formae
Pone varias formas controllata et componentes intra navbarum;
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<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>
</nav>
Pueri elementa immediata extensionis flexae .navbar
utendi et deficere debent justify-content: space-between
. Utere additional utilitates inflectere ut opus ad hunc agendi modum accommodent.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<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>
</nav>
Etiam input circulos operari. Si navbar tuum est forma integra, vel maxime forma, <form>
elemento uti potes ut continente et aliquo HTML salvare.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Variae globuli fulciuntur ut pars harum formarum navbarum quoque. Hoc etiam magnum est monumentum quod utilitates dam verticalis adhiberi possunt ad varias mediocritates ponendas.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
Textum
Navbars particulas textus ope continere potest .navbar-text
. Classis haec verticalem alignment et horizontalem spatii chordarum textuum accommodat.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Miscere et aequare cum aliis componentibus et utilitatibus prout opus est.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
Color consilia
Lemma navbarum numquam facilius egit propter compositionem classes et background-color
utilitates earum. Elige ex .navbar-light
usu colorum levium colorum, vel .navbar-dark
colorum obscurorum colorum. Deinde mos cum .bg-*
utilitate.
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
Continentes
Etsi non quaeritur, navbarem in .container
pagina ad centrum involvere potes—quamvis nota interiorem receptaculum adhuc requiri. .navbar
Vel vas in medio ad solum centrum contenta capitis navbar fixi seu statice addere potes .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
Utere omnibus vasis responsivis ad mutandum quam late contentum in navbare tuo praebeatur.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Placement
Utere positione nostra utilitates ad collocandas navbares in positionibus non-staticis. Elige a summo ad fixa, vel ad imum fixa, vel in cacumen haerere (cum paginae cartulas usque ad summum pervenerit, ibi remanet). Usus navbarum fixum position: fixed
, significantes se e normali fluxu domae trahi et consuetudo CSS (exempli gratia) requirere potest padding-top
ne <body>
cum aliis elementis incidat.
Nota etiam .sticky-top
usus position: sticky
, qui non plene in omni navigatro sustentatur .
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
Scrolling
Adde .navbar-nav-scroll
a .navbar-nav
(vel aliis navbar sub-componentibus) ut volumen verticalem efficiat intra contenta toggleabilium navbaris collapsae. Defalta, scrolling calcibus in ad 75vh
(vel 75% e regione prospecti altitudinis), sed vincire potes quod cum loci CSS consuetudine proprietatis --bs-navbar-height
vel stylorum consuetudinum. In amplioribus aspectibus cum navbar dilatetur, contentus apparebit sicut in defalta navbar.
Quaeso note hunc agendi modum cum potentiale incommodo — overflow
cum occasu overflow-y: auto
(requiritur hic ad librum contentum venire), overflow-x
instar est auto
, quod aliqua contentum horizontalem carpet.
Hic est exemplum navbar utens .navbar-nav-scroll
cum style="--bs-scroll-height: 100px;"
aliquibus extra margine utilitatibus ad optimum spacing.
<nav class="navbar navbar-expand-lg navbar-light 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" style="--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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<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" href="#" tabindex="-1" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex">
<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>
Responsivum se gerendi rationibus
Navbars uti possunt .navbar-toggler
, .navbar-collapse
, et .navbar-expand{-sm|-md|-lg|-xl|-xxl}
classes determinare cum contenta sua post puga pyga collapsa sunt. Cum aliis utilitatibus coniuncti, facile eligere potes quando elementa particularia demonstrare vel abscondere.
Nam navbars qui nunquam concidunt, .navbar-expand
classem in navbar addunt. Navbars enim quae semper concidunt, nullam .navbar-expand
classem addunt.
Toggler
Navbar togglers per defaltam varius relictus est, sed si fratrem quasi elementum sequantur .navbar-brand
, automatice ad ius tenus perpendentur. Aversando notam tuam retexam collocationem toggler. Infra exempla toggle stylorum diversorum sunt.
Cum nihil .navbar-brand
ostensum est ad minimum breakpoint;
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<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>
Cum notam nomen ostendit in dextra et toggler ad sinistram;
<nav class="navbar navbar-expand-lg navbar-light 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="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<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>
Cum toggler ad sinistram et notam nomen in dextro;
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<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>
Contentum externum
Interdum uti vis ruinae plugin ut felis elementum continente pro contento quod structuraliter extra corpus sedet .navbar
. Quia plugin nostra operatur in id
et data-bs-target
adaptans, id facile fieri!
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">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>
Quod cum feceris, commendamus etiam JavaScript addito ad umbilicum programmatice movendum ad continentem cum aperitur. Alioquin, tincidunt usores et utentes technologiarum adiuvantium verisimile habebunt tempus difficile inveniendi contentum recentem revelatum - praesertim si continens apertus praecedat toggler in structura documenti. Commendamus etiam ut fideles toggler aria-controls
attributum habeat, ostendens id
contenti continentis. In doctrina, hoc permittit utentes adiuvantes technologias ut salire protinus a toggler ad continentem regat-sed subsidium hoc in praesenti satis varius est.
Sass
Variabilium
$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-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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$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-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
Loop
Responsivum navbar expand/collationes classes (exempli gratia .navbar-expand-lg
) componuntur cum $breakpoints
tabula et per ansam in scss/_navbar.scss
.
// 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: $navbar-nav-link-padding-x;
padding-left: $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;
}
}
}
}
}