diff options
| -rw-r--r-- | docs/components/navbar.md | 12 | ||||
| -rw-r--r-- | docs/examples/carousel/index.html | 2 | ||||
| -rw-r--r-- | docs/examples/dashboard/index.html | 2 | ||||
| -rw-r--r-- | docs/examples/jumbotron/index.html | 2 | ||||
| -rw-r--r-- | docs/examples/navbar-top-fixed/index.html | 2 | ||||
| -rw-r--r-- | docs/examples/offcanvas/index.html | 2 | ||||
| -rw-r--r-- | docs/examples/starter-template/index.html | 2 | ||||
| -rw-r--r-- | docs/examples/sticky-footer-navbar/index.html | 2 |
8 files changed, 16 insertions, 10 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index ea4245b46..5c6f95198 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -401,7 +401,7 @@ When the container is within your navbar, its horizontal padding is removed at b ## Placement -Navbars can be statically placed (their default behavior), static without rounded corners, or fixed to the top or bottom of the viewport. +Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, isn't fully supported in every browser.** {% example html %} <nav class="navbar navbar-light bg-faded"> @@ -410,17 +410,23 @@ Navbars can be statically placed (their default behavior), static without rounde {% endexample %} {% example html %} -<nav class="navbar navbar-fixed-top navbar-light bg-faded"> +<nav class="navbar fixed-top navbar-light bg-faded"> <a class="navbar-brand" href="#">Fixed top</a> </nav> {% endexample %} {% example html %} -<nav class="navbar navbar-fixed-bottom navbar-light bg-faded"> +<nav class="navbar fixed-bottom navbar-light bg-faded"> <a class="navbar-brand" href="#">Fixed bottom</a> </nav> {% endexample %} +{% example html %} +<nav class="navbar sticky-top navbar-light bg-faded"> + <a class="navbar-brand" href="#">Sticky top</a> +</nav> +{% endexample %} + ## Responsive behaviors Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-toggleable-*` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 9bae2d69a..6815c3bd7 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -17,7 +17,7 @@ </head> <body> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> + <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index 650b39675..954a1132b 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -17,7 +17,7 @@ </head> <body> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> + <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html index d5be20393..9213c31cd 100644 --- a/docs/examples/jumbotron/index.html +++ b/docs/examples/jumbotron/index.html @@ -18,7 +18,7 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> + <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html index ea2c05b63..a52d29633 100644 --- a/docs/examples/navbar-top-fixed/index.html +++ b/docs/examples/navbar-top-fixed/index.html @@ -18,7 +18,7 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> + <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index 6757120f1..401c6f92a 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -18,7 +18,7 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-fixed-top navbar-inverse bg-inverse"> + <nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> diff --git a/docs/examples/starter-template/index.html b/docs/examples/starter-template/index.html index 9fcc8df80..7540e4121 100644 --- a/docs/examples/starter-template/index.html +++ b/docs/examples/starter-template/index.html @@ -18,7 +18,7 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-fixed-top"> + <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index 83fd29112..f8e302017 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -19,7 +19,7 @@ <body> <!-- Fixed navbar --> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> + <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> |