From 7cb142931341fc4e09342b62515be4c5ed03f077 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jan 2021 17:47:41 -0800 Subject: [PATCH] Rename local variable, add more to docs, fix value inconsistency, move class from first demo, link to the demo from up top --- scss/_navbar.scss | 14 ++++--- site/content/docs/5.0/components/navbar.md | 46 ++++++++++------------ 2 files changed, 29 insertions(+), 31 deletions(-) diff --git a/scss/_navbar.scss b/scss/_navbar.scss index cd3b78cef..1187d617b 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -115,11 +115,6 @@ width: 100%; } -.navbar-nav-scroll { - max-height: var(--height, 70vh); - overflow-y: auto; -} - // Button for toggling the navbar when in its collapsed state .navbar-toggler { padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; @@ -153,6 +148,11 @@ background-size: 100%; } +.navbar-nav-scroll { + max-height: var(--bs-scroll-height, 75vh); + overflow-y: auto; +} + // Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. .navbar-expand { @@ -179,6 +179,10 @@ } } + .navbar-nav-scroll { + overflow: visible; + } + .navbar-collapse { display: flex !important; // stylelint-disable-line declaration-no-important } diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index 5bd388bdc..435bb52c2 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -31,7 +31,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from - Flex and spacing utilities for any form controls and actions. - `.navbar-text` for adding vertically centered strings of text. - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint. -- Add an optional `.navbar-scroll` to set a `max-height` and scroll on navbar content. +- Add an optional `.navbar-scroll` to set a `max-height` and [scroll expanded navbar content](#scrolling). Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. @@ -42,7 +42,7 @@ Here's an example of all the sub-components included in a responsive light-theme -