Keep a fixed header height in the Divi theme

by | Jul 20, 2017 | Divi Theme, Web Design

Keep a fixed header height in the Divi theme

 

 

In this video today we’re going to show you how to keep a fixed header height in the Divi theme. Divi is an absolutely awesome theme, I’ve used it on so many countless projects, and it just keeps getting better. But one of the built-in features is that when you scroll, the header shrinks.

I’ve got a fresh install of the Divi theme right here I’ll show you what I mean by refreshing it and now I scroll down the page, you’ll notice this header section shrinks to a smaller size, you see that that also makes your logo a lot smaller as well. This is a nice little space saving feature but you may not want that to happen, you may want to keep your logo the same size and your header at the same size as we’re scrolling.

In this video I’m going to show you how to fix that. First thing we’re going to want to do is go to our dashboard, once we’re in the dashboard we need to go down to the Divi tab which takes us to  the theme options by default. Now if we scroll over to the right-hand side to integration and click on the tab. we want to go down to where we see add the code to the body, right here. Now I’ve got some script that I’m going to put in there. I’ll just expand that so you can see it, and for those of you that are panicking now having to do a bit of scripting, pick yourselves up off of the floor, it’s not a problem. I’ll have this in a downloadable PDF for you below this video, so you can just select it and copy it, and paste it into the body of your Divi theme should you need to.

So once you’ve pasted that code in there all we need to do is save our changes and we’ll go and visit our site. Now if we go back to the page we were on and we scroll down, as you can see the header height stays the same size and our logos height stays the same size. so if you want to keep your logo the same size when you’re scrolling down your Divi page, that’s the way to do it, it’s pretty quick it’s pretty simple. Like I say there will be a downloadable PDF under the video so you can just copy and paste from that. I hope that’s been useful to you.

Download the Script Used here

How to animate any Divi Module:

 

CLICK HERE TO GET YOUR DIVI THEME AND PLUGINS

 

Subscribe To Our You Tube Channel For More Divi Tips

 

websites that sell

Subscribe To Our Newsletter

Join the System 22 mailing list to receive the latest tech tips, deals and updates from our team.

We will never spam or share your email!

You have Successfully Subscribed!

Pin It on Pinterest

Share This