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

Responsive Shrinknav

The navbar has a fixed position. When scrolling down about 80px, the logo text and the navbar itself will 'shrink' and become smaller. The fixed position and the shrink effect cannot be demonstrated here, as that would interfere with the site navigation. Download the component and see the full effects there.
The width of the navbar can extend the whole viewport, or just a part of it. It is possible to have a picture background instead of just the colour.

Download the component.