This PR builds on @vanduynslagerp's work in #21719 as a basis for many of our navbar related issues. position: absolute
, a missing .container-fluid
, and some inconsistent sizing of navbar sub-components. That's all getting fixed here.
-
Correct navbar collapsing breakpoints resulting from the broken Sass mixin that was generating our
.navbar-toggleable
classes. Basically this wasn't generating mobile-first classes, so we were acting on the wrong media query values. Fixes #21691 (closed), fixes #21706 (closed), and closes #21719.As part of this,
.navbar-toggleable
classes have been renamed to.navbar-expand
to match the mobile-first approach used elsewhere. -
Redo the
.navbar-toggler
alignment by dropping the modifiers entirely. Instead of using absolute position, we run with the DOM order and make use ofjustify-content: space-between
, forcing navbar brand and toggler to be on opposite ends of the navbar. This drops.navbar-toggler-left
and.navbar-toggler-right
Fixes #21659 (closed), fixes #21735 (closed), fixes #21846 (closed), fixes #21984 (closed), and closes #21729. -
Resolve issues with
.container-fluid
not being fully supported within.navbar
. Fixes #21530 (closed) and closes #21901. -
Normalizes the sizing of navbar brand, text, and link elements by pulling in the changes from #21721 (which fixes #21705 (closed), fixes #21956 (closed), and fixes #21604 (closed)). This one might still need further love, or our inputs will; the text input and buttons are
38px
vs the nav's40px
. Any changes to that will come in another PR.
Still to do:
-
Update navbar doc examples to drop toggler modifiers and reorder brand/toggler -
Drop navbar toggler variants in docs