Hide navbar menu on scroll down, show on scroll up
Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit.
Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.
You can make bootstrap navbar fixed to top of page. But it will be visible always. This is also not bad. But in terms of UX when users focus on content that makes feel better. How we can do that? Hide navbar or header as the user scrolls down, and show it again when user scrolls page up. Many websites already doing this. Here is how we do it
Steps to make bootstrap 5 navbar auto hide on scroll up
- Create navbar on top of page
- Write javascript funcrion to check if window scrolled
- Add condition: if scrolled up, or scrolled down
- Add custom class
scrolled-downorscrolled-upinside "if" conditionif (...) { .. }to hide navbar, or to show - Add fixed-top class on navbar
- Add styling to custom classes, like
transform:translateY(-100%);to hide and so on...
Here are basic code to create auto hiding navbar header
Back to all examples