Want updates & exclusive offers?

Hey there!

Sticky shrinking Divi header with notification bar

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.

 

Download template

 

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

Want to discuss this post?

Learn how to create Divi Child Themes that sell

Divi child theme course - Reloaded!
  • Use your existing industry knowledge to define and harness your niche
  • Productise your business with affordable website solutions for clients
  • Add a new revenue stream to your business that pays while you sleep
Find out more
Divi Child Theme Course
Are you

Struggling with Divi?

Struggling with Divi?

Hey! I want to make sure the content I create is helpful to the wider Divi community. If there's something you always find difficult to do when creating Divi sites, or a styling option you wish Divi had, complete the Divi tutorial request form and tell me all about it. I don't guarantee I'll be able to create something that solves the issue, but I'm smarter than your average bear so you never know!

P.S. - This is NOT a support request form and you won't be subcribed to any email lists. If you have an issue with one of our products, you can get help here.



First
Why? I might have questions, and if I create a solution I'll let you know.

Want a website like ours?

More posts

You might like!

Long Form Sales Page

Long Form Sales Page

Each section in this long form sales page is clearly defined using colours and the built in section divider options. The template also uses the same script font I use on my own site design, which will import along with the layout. All the design is in the sections, rows and modules, with only a tiny bit of custom CSS!

Long Form Sales Page

Divi Split Screen Slider

This layout uses the native Divi slider module on the right, a few text modules and a button module on the left, and some custom CSS. You can have as many or as few images in the slider as you like, the controllers will adjust to fit the width automagically.