How to create a Fixed Header and Shrink on Scroll with Divi Theme Builder

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

How to access the Divi Easy Theme Builder Extension

To use the Divi Easy Theme Builder Extension, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Divi Easy Theme Builder Extension in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 20 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality. Get it now from the WordPress Repository here.

Divi Easy Theme Builder Extension can also found in the Free Version of Divi Supreme but with some limited options.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

eighteen + 6 =