Sticky shrinking Divi header with notification bar

I still see people using external code to create a sticky shrinking Divi header, but this is easily achievable with the built in settings.

I’ve created a free template that you can import into a Theme Builder layout and style to your needs. It has a notification bar that scrolls away with the page, but the menu sticks to the top. It also shrinks on scroll, and returns to its original size when you scroll back to the top.

How to use this template.

Unzip the download file and import the JSON layout into a page or Theme Builder layout.

I designed this template without any significant styling, and just the sticky scroll functionality so that it’s easy for you to modify for your needs, but there are a few things you may want to adjust.

1. Row padding – This had been modified in both rows within the section: Row settings > Design > Spacing.
2. Background colours – This is set in each of the rows: Row settings > Content > Background.
3. Logo size – You might want to adjust the standard size, and the reduced size on scroll: Menu settings > Design > Sizing > Logo width (desktop & sticky).
4. Menu link height on scroll – This is defined using padding: Menu settings >Advanced > Custom CSS > Menu Link > Sticky.

Everything else is easily adjusted in the various module settings.

Enjoy!

Michelle x