How to Shrink the Sticky Header on Scroll in Neve Pro

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 the Logo & Site identity and Primary Menu components.

2. Recreate your header on the second builder row. ( You can create a totally different header if you want )

Configure the second row

3. 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.

Row settings

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

Row height

5. 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.

First header row

Second header row

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

Header height decreasing on scroll

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.