Navbar with Fixed Top
This example demonstrates how the fixed navbar remains securely anchored to the top of the viewport as the user scrolls down the page.
A top padding is applied to the body element equal to or greater than the
height of the fixed navbar to prevent content collision.
Sticky vs Fixed
Unlike position: sticky which scrolls within its boundary container,
position: fixed remains docked relative to the entire browser window regardless of document
hierarchy.
Mobile Responsiveness
On smaller displays, clicking the hamburger button triggers boodoo's zero-dependency JavaScript collapse transition effortlessly.
Scroll Depth Demonstration
Scroll up and down to observe how cleanly the fixed navbar sticks to the top of your screen with smooth performance and elevated box shadow.