diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/navbar.md | 12 |
1 files changed, 9 insertions, 3 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. |