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

scss/_navbar.scss

@@ -277,7 +277,7 @@
 //
 
 .navbar-text {
-  // Boosted mod: no padding-top
+  padding-top: var(--#{$prefix}navbar-nav-link-padding-y); // Boosted mod
   padding-bottom: var(--#{$prefix}navbar-nav-link-padding-y); // Boosted mod
   color: var(--#{$prefix}navbar-color);
 
@@ -302,26 +302,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
@@ -333,6 +335,7 @@
   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); // Boosted mod
   // stylelint-disable-next-line function-disallowed-list
   margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); // Boosted mod
+  margin-left: auto; // Boosted mod
   @include font-size(var(--#{$prefix}navbar-toggler-font-size));
   line-height: 1;
   color: var(--#{$prefix}navbar-color);
@@ -455,19 +458,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;
@@ -498,6 +488,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 {

site/content/docs/5.3/components/navbar.md

@@ -325,7 +325,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>

site/content/docs/5.3/components/orange-navbar.md

@@ -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>
@@ -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>
@@ -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="#" aria-current="page">Discover</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
@@ -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>
@@ -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>
@@ -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>
@@ -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 col-3 navbar-item" role="search">
+      <form class="d-none d-lg-flex col-3 navbar-item" role="search">
         <input class="form-control" type="search" placeholder="Search" aria-label="Search">
       </form>
       <div id="global-header-5.2" class="navbar-collapse collapse d-sm-flex global-header-5">
@@ -516,7 +516,7 @@ It should be visible only for the larger screens (`lg` to `xxl` breakpoints) usi
 
   <nav class="navbar navbar-expand-lg" aria-label="Global navigation - Nav-under example">
     <div class="container-xxl">
-      <div id="global-header-7.1" class="navbar-collapse collapse m-0 global-header-7">
+      <div id="global-header-7.1" class="navbar-collapse collapse global-header-7">
         <ul class="navbar-nav">
           <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Label</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Label</a></li>

site/content/docs/5.3/migration.md

@@ -779,6 +779,27 @@ Color mode mechanism coming from Bootstrap is available from Boosted v5.3.0. How
 - **Offcanvas**
   - <span class="badge text-bg-success">New</span> A tooltip was added on close buttons of offcanvases. Please add this tooltip in your websites, by adding the attributes `data-bs-toggle`, `data-bs-placement` and `data-bs-title`.
 
+- **Orange navbar**
+  - <span class="badge bg-danger">Warning</span> For usability, the way to manage spacing in the navbar has been changed. You may not need the margin utilities on `.navbar-brand` and `.navbar-collapse` anymore. And depending on the alignment of the items, you may need to add some on `.navbar-nav`.
+    <details class="mb-2">
+      <summary>More info</summary>
+
+      ```diff
+      - <div class="navbar-brand me-auto (me-lg-4)">...</div>
+      + <div class="navbar-brand">...</div>
+      ```
+
+      ```diff
+      - <div class="navbar-collapse collapse (me-lg-auto) (me-lg-3)">...</div>
+      + <div class="navbar-collapse collapse">...</div>
+      ```
+
+      ```diff
+      - <div class="navbar-nav">...</div>
+      + <div class="navbar-nav (ms-auto)">...</div>
+      ```
+    </details>
+
 - **Progress bars**
   - The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.
 

site/layouts/shortcodes/orange-global-headers.html

@@ -30,7 +30,7 @@
 
 <nav class="navbar navbar-expand-lg" 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">
@@ -50,14 +50,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>
@@ -88,12 +88,12 @@ <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">
       <input class="form-control" type="search" placeholder="Search" aria-label="Search">
     </form>
 {{- end }}
     <div id="{{ $id }}.2" class="navbar-collapse collapse{{ cond (not (eq $mode "theme")) " d-sm-flex" " d-lg-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">
@@ -170,7 +170,7 @@ <h1 class="title">Title</h1>
 {{- if $navigation }}
 <nav class="navbar 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>