How to Shrink the Sticky Header on Scroll in Neve Pro

Watch a video on shrinking the header

Neve Pro Addon's Header Booster module brings in a new level of customizations in Neve. Using the multiple components and the Sticky and Show only on scroll options you can easily build the header you wish for your site.

In this doc, you will learn how to shrink the sticky header on scroll. Just follow the steps below.

1. Build your header using Neve's header builder. For this example, we've used different components on each row. The idea is that the first row is more complex, and the second one will show only the navigation menu.

2. Open the header's first row's settings by clicking on the little wheel that appears once you hover with your mouse over the row.

In the Style tab, update the Row height control to 200 px, or whatever value you feel is consistent with your design.

3. Like before, open the header's second row's settings by clicking on the little wheel that appears once you hover with your mouse over the row. 

In the Layout tab, you need to check the Stick to top and Show only on scroll options.

Settings for the first row

Settings for the second row

6. Save the options, scroll, and enjoy your new shrinking header :)

For more details on the Neve Pro Addon, make sure you check the complete documentation.