diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index f303aa2bca..5856ea54c6 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -12,8 +12,9 @@ Here's what you need to know before getting started with the navbar: - Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes. - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. -- Navbars and their contents are built with flexbox, providing easy alignment options via utility classes. +- Use our [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flex]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) utility classes for controlling spacing and alignment within navbars. - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. +- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class. - Ensure accessibility by using a ` {% endexample %} +This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/color/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes. + ### Brand The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. @@ -395,11 +409,13 @@ When the container is within your navbar, its horizontal padding is removed at b ## Placement -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](https://caniuse.com/#feat=css-sticky).** +Use our [position utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/position/) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements. + +Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**. {% example html %} {% endexample %}