From c6c0522598037fcdeb04dfa376910a7cb5fa0fa8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 May 2016 08:15:48 -0700 Subject: [PATCH 1/2] more navbar variables --- scss/_navbar.scss | 6 +++--- scss/_variables.scss | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 721e7ab00f..9d3db1b263 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -87,8 +87,8 @@ .navbar-divider { float: left; width: $border-width; - padding-top: .425rem; - padding-bottom: .425rem; + padding-top: $navbar-divider-padding-y; + padding-bottom: $navbar-divider-padding-y; margin-right: $navbar-padding-x; margin-left: $navbar-padding-x; overflow: hidden; @@ -105,7 +105,7 @@ // Bootstrap JavaScript plugin. .navbar-toggler { - padding: .5rem .75rem; + padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; font-size: $navbar-toggler-font-size; line-height: 1; background: none; diff --git a/scss/_variables.scss b/scss/_variables.scss index fa927e2527..2dcfe8b880 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -477,8 +477,11 @@ $zindex-modal: 1050 !default; $navbar-border-radius: $border-radius !default; $navbar-padding-x: $spacer !default; $navbar-padding-y: ($spacer / 2) !default; + $navbar-brand-padding-y: .25rem !default; +$navbar-divider-padding-y: .425rem !default; + $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; From 05bdecd0b09a007ae949f49fdff9006650c06969 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 May 2016 08:19:16 -0700 Subject: [PATCH 2/2] Add dropdown menu example to navbar docs --- docs/components/navbar.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 5f7f366344..ea5a361063 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -107,6 +107,34 @@ And because we use classes for our navs, you can avoid the list-based approach e {% endexample %} +You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. + +{% example html %} + +{% endexample %} + ## Color schemes