From 026f417bf26625ca8a9d9d5a676164bfa865865d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Nov 2020 09:08:38 -0800 Subject: [PATCH 1/5] Test out a .navbar-nav-scroll class --- scss/_navbar.scss | 6 +++ site/content/docs/5.0/components/navbar.md | 54 +++++++++++++++++++++- 2 files changed, 59 insertions(+), 1 deletion(-) diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 852328aca155..4dc29de1b5e5 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -115,6 +115,12 @@ width: 100%; } +.navbar-nav-scroll { + max-height: var(--height, 70vh); + overflow-y: auto; + // overflow-x: hidden; +} + // Button for toggling the navbar when in its collapsed state .navbar-toggler { padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index e59c7c25b97f..6599118fb8a3 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -31,6 +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. Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. @@ -41,7 +42,7 @@ Here's an example of all the sub-components included in a responsive light-theme -