After the release of Divi Theme Builder, we can create beautiful header with our custom header design using the Divi Theme Builder and the Power of Divi Builder, the possibilities are endless. However, a few features are missing and we are seeing so many people were complaining about creating Fixed, Shrinking the header on Scroll, Changing Logo on Scroll and many other things. So we listened to those people and here we are presenting Divi Easy Theme Builder Extension, and using it you can easily do all those things which you were unable to do without coding.

What we can do with this extension:

• Easily Create a Fixed Header
• Shrink Header on Scroll
• Change Logo On Scroll
• Pushing Body down to avoid overlapping of page content(Smart tool)
• More coming soon

Settings Page

You can access the Settings page for the Easy Theme Builder for Header by going to Divi Supreme > Easy Theme Builder and here you can start working

For today’s tutorial, we’re using Minimal Header & Footer Layout from Elegant Themes. And we’ll take the use of the Header from this Layout in our this tutorial.

So let’s see.

How to make your Header Fixed

The first switch you’ll see will do this thing. It will make you Header to be always on top even when you scroll down the page.

When you’ll have this option enabled you might see an issue with the Page content overlapping, So yeah you don’t need to worry about that because we’ve fixed this issue for you can enable “Push Body Down” to easily fix this problem.

How to Disable Fixed Header on Mobile Devices

If you don’t want to make you header Fixed on Mobile Devices then you can also disable this, you’ll see two checkboxes Labelled as “Disable On” and you can select on which device you don’t want your header to be fixed you can even choose Mobile or Tablet.

How to enable Shrink on Scroll

This is a very interesting part and using this option you can shrink your header with a smaller size than the original. For example if you’ve added 10px padding to the section of your header then you can enter 0 in this field, it will automatically remove the 10px from the section and will add 0px padding to the section only when you scroll down.

And the same thing you can do with the Row and Menu Module of the Header. You can also shrink them when scrolling down.

How to Disable Fixed Header on Mobile Devices

Add some percentage amount here from 0% to 100%. Your Logo size in Header is 100% so If you’ll add 70 here then the size of the logo will be also shrinked when you scroll. Only add amount not % sign.

If you want to change the Logo on Scroll then don’t worry Divi Supreme made it easy for you. All you’ve to do is just select a logo from your Media Library and insert it in “Shrink Logo Image” and yeah that’s it. See it in action!

Shrink Threshold

Enter a value here so your Header will be shrinked when you enter that viewport.

Here’s what we created today.

Another Example. This one have the Logo Switch/Change on Scroll.