mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Add sticky bottom utility (#35518)

Browse Source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Florian Lacreuse
2021-12-16 09:27:00 +01:00
committed by GitHub
parent 2d07383e32
commit d17801265e
5 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/components/navbar.md
+10 -2
View File
@@ -450,9 +450,9 @@ Use any of the responsive containers to change how wide the content in your navb
## Placement
Use our [position utilities]({{< docsref "/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 `<body>`) to prevent overlap with other elements.
Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, stickied to the top (scrolls with the page until it reaches the top, then stays there), or stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there).
Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**.
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 `<body>`) to prevent overlap with other elements.
{{< example >}}
<nav class="navbar navbar-light bg-light">
@@ -486,6 +486,14 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
</nav>
{{< /example >}}
{{< example >}}
<nav class="navbar sticky-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
</nav>
{{< /example >}}
## Scrolling
Add `.navbar-nav-scroll` to a `.navbar-nav` (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at `75vh` (or 75% of the viewport height), but you can override that with the local CSS custom property `--bs-navbar-height` or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.