diff options
| author | Mark Otto <[email protected]> | 2016-05-14 12:41:48 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-05-14 12:41:48 -0700 |
| commit | 9c0c5fd9b1dca24d999bd4817c7d73db212d26af (patch) | |
| tree | 08cfcbad04550e5f1bf886b2a9369d52791e3489 | |
| parent | f98f9c91553b0c44c48b1a561411ff4e8714817a (diff) | |
| parent | 05bdecd0b09a007ae949f49fdff9006650c06969 (diff) | |
| download | bootstrap-9c0c5fd9b1dca24d999bd4817c7d73db212d26af.tar.xz bootstrap-9c0c5fd9b1dca24d999bd4817c7d73db212d26af.zip | |
Merge branch 'v4-navbars' of https://github.com/twbs/bootstrap into v4-navbars
| -rw-r--r-- | docs/components/navbar.md | 28 | ||||
| -rw-r--r-- | scss/_navbar.scss | 6 | ||||
| -rw-r--r-- | scss/_variables.scss | 3 |
3 files changed, 34 insertions, 3 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 3387374f3..10d6547d0 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -109,6 +109,34 @@ And because we use classes for our navs, you can avoid the list-based approach e </nav> {% 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 %} +<nav class="navbar navbar-light bg-faded"> + <ul class="nav navbar-nav"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Features</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Pricing</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Dropdown link + </a> + <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> +</nav> +{% endexample %} + ## Color schemes diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 721e7ab00..9d3db1b26 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 fa927e252..2dcfe8b88 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; |