Skip to content

Navbar: Allow flex-grow on each .navbar-collapse #1528

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Navbar: Allow flex-grow on each .navbar-collapse #1528

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0d1fcbe
Fix
louismaximepiton Sep 9, 2022
d57b660
Merge branch 'main' into main-lmp-navbar-flex-grow-fix
louismaximepiton Nov 28, 2022
51d649c
Merge branch 'main' into main-lmp-navbar-flex-grow-fix
louismaximepiton Jan 18, 2023
66bc30d
Merge branch 'main' into main-lmp-navbar-flex-grow-fix
louismaximepiton Feb 21, 2023
f89baaa
Merge branch 'main' into main-lmp-navbar-flex-grow-fix
louismaximepiton Mar 16, 2023
833abe7
Merge branch 'main' into main-lmp-navbar-flex-grow-fix
louismaximepiton Mar 16, 2023
15e6e73
Migration guide
louismaximepiton Mar 17, 2023
aabf8af
Merge branch 'main' into main-lmp-navbar-flex-grow-fix
louismaximepiton Apr 25, 2023
3eb4d96
Merge branch 'main' into main-lmp-navbar-flex-grow-fix
louismaximepiton Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 36 additions & 27 deletions scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,26 +265,28 @@
// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse.show, // Boosted mod: always keep nav-items at full width when transitioning
.navbar-collapse.collapsing {
flex-basis: 100%;
// Boosted mod: no flex-grow to avoid weird behavior in expanded breakpoints and .show
.navbar-collapse {
// Bosted mod: flex-basis only on .show and .collapsing
flex-grow: 1;
// For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities.
align-items: center;
justify-content: flex-end; // Boosted mod

// Boosted mod: Handle icons support and padding of expanded navbars
&[class*="d-"] {
border-top: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);
// Boosted mod: Handle multiple collapse
// Always keep nav-items at full width when transitioning
&.show,
&.collapsing {
flex-basis: 100%;
justify-content: flex-start;

@include media-breakpoint-up(md) {
margin-bottom: calc(-1 * var(--#{$prefix}navbar-padding-y)); /* stylelint-disable-line function-disallowed-list */
}
}
// Handle icons support and padding of expanded navbars
&[class*="d-"] {
border-top: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);

@include media-breakpoint-up(md) {
&:first-of-type {
margin-top: var(--#{$prefix}navbar-padding-y);
@include media-breakpoint-up(md) {
margin-bottom: calc(-1 * var(--#{$prefix}navbar-padding-y)); /* stylelint-disable-line function-disallowed-list */
}
}
}
// End mod
Expand All @@ -294,6 +296,7 @@
.navbar-toggler {
padding: var(--#{$prefix}navbar-toggler-padding-y) calc(var(--#{$prefix}navbar-toggler-padding-x) / 2) var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
margin-left: auto; // Boosted mod
@include font-size(var(--#{$prefix}navbar-toggler-font-size));
line-height: 1;
color: var(--#{$prefix}navbar-color);
Expand Down Expand Up @@ -415,19 +418,6 @@
// End mod
}

// Boosted mod: Handle the responsiveness of the collapsing content in a global header
.navbar-collapse.show,
.navbar-collapse.collapsing {
&[class*="d-"] {
margin-bottom: 0;
border-top: 0;
}

&:first-of-type {
margin-top: 0;
}
}

// Handle the responsiveness of the different bars of a global header
&.supra {
display: flex;
Expand Down Expand Up @@ -457,6 +447,25 @@
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
justify-content: unset; // Boosted mod

// Boosted mod: Handle the responsiveness of the collapsing content in a global header
&.show,
&.collapsing {
&[class*="d-"] {
margin-bottom: 0;
border-top: 0;
}

&:first-of-type {
margin-top: 0;
}
}

~ .navbar-collapse {
flex-grow: 0;
}
// End mod
}

.navbar-toggler {
Expand Down
8 changes: 4 additions & 4 deletions site/content/docs/5.2/components/navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Here's an example of all the sub-components included in a responsive dark-themed
<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 align-items-end" id="navbarSupportedContent">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
Expand Down Expand Up @@ -323,7 +323,7 @@ Mix and match with other components and utilities as needed.
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text ms-3">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
Expand Down Expand Up @@ -465,7 +465,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse align-items-end" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll align-items-end" style="--bs-scroll-height: 100px;">
<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>
Expand All @@ -484,7 +484,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
</ul>
</li>
</ul>
<form class="d-flex navbar-item ms-3 mt-md-4" role="search">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary btn-inverse" type="submit">Search</button>
</form>
Expand Down
16 changes: 8 additions & 8 deletions site/content/docs/5.2/components/orange-navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ An additional navbar (with text or icon items) can be added on the right of the
...

<!-- Navbar with links -->
<div id="global-header-0.1" class="navbar-collapse collapse me-lg-auto global-header-0">
<div id="global-header-0.1" class="navbar-collapse collapse global-header-0">
<!-- Left navbar of the Supra bar -->
<ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
Expand Down Expand Up @@ -155,7 +155,7 @@ An additional navbar (with text or icon items) can be added on the right of the
<div class="container-xxl">

<!-- Orange brand logo -->
<div class="navbar-brand me-auto me-lg-4">
<div class="navbar-brand">
<a class="stretched-link" href="#">
<img src="/docs/{{<param docs_version>}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
</a>
Expand All @@ -167,7 +167,7 @@ An additional navbar (with text or icon items) can be added on the right of the
</button>

<!-- Navbar with links -->
<div id="global-header-1.1" class="navbar-collapse collapse me-lg-auto global-header-1">
<div id="global-header-1.1" class="navbar-collapse collapse global-header-1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Discover</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
Expand Down Expand Up @@ -235,7 +235,7 @@ If you do not intend to use your own SVG, you should explore the DOM solution an
<div class="container-xxl">

<!-- Orange brand logo -->
<div class="navbar-brand me-auto">
<div class="navbar-brand">
<a class="stretched-link" href="#">
<img src="/docs/{{<param docs_version>}}/assets/brand/OBS-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
</a>
Expand Down Expand Up @@ -272,7 +272,7 @@ Next to the brand logo, you can add a title that can be displayed on one or two
<div class="container-xxl">

<!-- Orange brand logo -->
<div class="navbar-brand me-auto me-lg-4">
<div class="navbar-brand">
<a class="stretched-link" href="#">
<img src="/docs/{{<param docs_version>}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
</a>
Expand Down Expand Up @@ -306,7 +306,7 @@ Next to the brand logo, you can add a title that can be displayed on one or two
<div class="container-xxl">

<!-- Orange brand logo -->
<div class="navbar-brand me-auto me-lg-4">
<div class="navbar-brand">
<a class="stretched-link" href="#">
<img src="/docs/{{<param docs_version>}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
</a>
Expand Down Expand Up @@ -356,7 +356,7 @@ You can add a search input into your Global header.
...

<!-- Navbar with action icons -->
<form class="d-flex d-none d-lg-flex nav-item" role="search">
<form class="d-none d-lg-flex col-3 navbar-item" role="search">
<!-- todo : reforge when .dark-input -->
<input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
</form>
Expand Down Expand Up @@ -428,7 +428,7 @@ It should be visible only for the larger screens (`lg` to `xxl` breakpoints) usi

<nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Nav-under example">
<div class="container-xxl">
<div id="global-header-6.1" class="navbar-collapse collapse m-0 global-header-6">
<div id="global-header-6.1" class="navbar-collapse collapse global-header-6">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Label</a></li>
<li class="nav-item"><a class="nav-link" href="#">Label</a></li>
Expand Down
16 changes: 8 additions & 8 deletions site/layouts/shortcodes/orange-global-headers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

<nav class="navbar navbar-dark bg-dark navbar-expand-lg{{ cond $minimized " header-minimized" "" }}" aria-label="{{ $aria_label }}">
<div class="container-xxl">
<div class="navbar-brand me-auto{{ cond (or $navigation $responsive_logo) "" " me-lg-4" }}">
<div class="navbar-brand">
<a class="stretched-link" href="#">
{{- if $responsive_logo }}
<img src="/docs/{{ $.Site.Params.docs_version }}/assets/brand/OBS-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
Expand All @@ -52,14 +52,14 @@ <h1 class="title">Title</h1>
<span class="navbar-toggler-icon"></span>
</button>
{{- if not $navigation }}
<div id="{{ $id }}.1" class="navbar-collapse collapse {{ cond $responsive_logo "me-lg-3" "me-lg-auto" }} {{ $id }}">
<div id="{{ $id }}.1" class="navbar-collapse collapse me-lg-3 {{ $id }}">
{{- if $supra }}
<ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
<li class="nav-item"><a href="#" class="nav-link">Business</a></li>
</ul>
{{- end }}
<ul class="navbar-nav">
<ul class="navbar-nav{{ cond $responsive_logo " ms-auto" "" }}">
{{- if $labels }}
<li class="nav-item"><a class="nav-link{{ cond $supra "" " active"}}" href="#"{{- if not $supra }} aria-current="page"{{- end }}>Label</a></li>
<li class="nav-item"><a class="nav-link" href="#">Label</a></li>
Expand All @@ -81,7 +81,7 @@ <h1 class="title">Title</h1>
{{- end }}
</ul>
{{- if $supra }}
<ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none">
<ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
<li class="nav-item"><a class="nav-link active" href="#" aria-label="English version" aria-current="true">EN</a></li>
<li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
<li class="nav-item"><a class="nav-link" href="#" aria-label="Version en español" lang="es" hreflang="es">ES</a></li>
Expand All @@ -90,13 +90,13 @@ <h1 class="title">Title</h1>
</div>
{{- end }}
{{- if eq $mode "search" }}
<form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
<form class="d-none d-lg-flex col-3 navbar-item" role="search">
<!-- todo : reforge when .dark-input -->
<input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
</form>
{{- end }}
<div id="{{ $id }}.2" class="navbar-collapse collapse d-sm-flex{{ cond $responsive_logo " ms-lg-3" "" }} {{ $id }}">
<ul class="navbar-nav flex-row">
<ul class="navbar-nav flex-row{{ cond $navigation " ms-lg-auto" "" }}">
{{- if eq $mode "actions" }}
<li class="nav-item">
<a href="#" class="nav-link nav-icon">
Expand Down Expand Up @@ -143,7 +143,7 @@ <h1 class="title">Title</h1>
{{- if $navigation }}
<nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="{{ $aria_label }}.2">
<div class="container-xxl">
<div id="{{ $id }}.1" class="navbar-collapse collapse m-0 {{ $id }}">
<div id="{{ $id }}.1" class="navbar-collapse collapse {{ $id }}">
{{- if $supra }}
<ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
Expand All @@ -159,7 +159,7 @@ <h1 class="title">Title</h1>
<li class="nav-item"><a class="nav-link" href="#">Label</a></li>
</ul>
{{- if $supra }}
<ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none">
<ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
<li class="nav-item"><a class="nav-link active" href="#" aria-label="English version" aria-current="true">EN</a></li>
<li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
<li class="nav-item"><a class="nav-link" href="#" aria-label="Version en español" lang="es" hreflang="es">ES</a></li>
Expand Down