Back to the
Component Shop
Read this first! Accordion Auto Sidebar Backbutton Before/After Comparison Collapsible Alert Count-down Script Cut-out Text Drop-down Equal Height Columns Filtered Portfolio Flip-cards Hamburger Menu Horizontal Tabs Image Gallery Image Modal Image Shapes Image Slider with Fade Jquery Parallax Lazy Loading Lightbox Gallery Masonry Grid Gallery Oval Image Range Slider Read More Button Responsive Navbar Responsive Shrinknav Responsive Sidebar Responsive Table Round Image Scroll to Top Simple Shapes Simple Cards Simple Slider Skill Bars Slide-in Nav Sticky Navbar Tabbed Gallery Text on Image Translucent Image Translucent Text Layer Vertical Tabs Video Wrapping Text

Sticky Navbar

Scroll Down

Scroll down to see the sticky effect.

When you scroll down the page, at a certain point the header image will disappear, and the navigation will remain fixed to the top. To enable this, the page needs to have a height that makes scrolling at all possible. This does not work fully with the demo here, that would have interfered with the site navigation. Download the component and see it working there.
The class name 'navbar' must not be changed as it is being used by the java script.

Download the component.