Fixed Divi Header That Shrinks
Another Header tutorial To Be Used With Previous Ones
We are excited that our Divi header series is so popular, and its even more exciting hearing feedback from you about what you want to see next. One of the requested tutorials which will along with some of our previous ones is to have a Divi Theme Builder header menu that shrinks and stays fixed when you scroll. This one is going to go along perfectly with our previous tutorial, which was How To Change The Color Of A Fixed Divi Header Menu When Scrolling. This Divi tutorial will show you how to change shrink parts of the Divi header when scrolling!
#1. Create Your Fixed Divi Theme Builder Header Menu
From your WordPress Dashboard, go to Divi>Theme Builder. Create a new template, and assign where needed. In our example, we chose to assign the menu to a specific page.
Click on “Add Custom Header” and in the popup choose “Build Custom Header.”
In the Divi Theme Builder template, create a section and add a row with any layout you want. In our example, we used a logo, menu, and button.
The most important part here is adding the CSS class to the section. Go to the section settings to the Advanced tab and add the class “pa-header” as shown in the image below.
Be sure to set the header section position!
Go to the section settings to the Advanced tab and go down to the Position toggle. Set the position to Fixed.
#2. Add Some Custom jQuery Code
This Code Will Add A New CSS Class On Scroll
Now for the fun part! You don’t have to worry about adding code because I’ll show you exactly where to add this and you will do just fine copying it to your website!
From your WordPress dashboard, go to Divi>Theme Options. Then look for the Integrations tab at the top. Once you are there, you will see a code input area that says “Add code to the < head > of your blog.” That’s the input areas where you need to paste the code snippet below.
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".pa-header").addClass("pa-fixed-header");
}
else{
jQuery(".pa-header").removeClass("pa-fixed-header");
}
});
});
</script>Here’s how that will look!
#3. Add Some Custom CSS Code
This Code Will Shrink the Divi Menu Items When Scrolling
In step #2, we added some jQuery code that activates a new CSS class in the header section when the page scrolls. Now, we need to tell that class what to do. In our other tutorial, we were changing the background color, but in this one, we are going to change the top and bottom spacing and maybe a few other items.
Change The Spacing
From your WordPress dashboard, go to Divi>Theme Options. Scroll down to the Custom CSS box and paste the following code snippet there.
/*set the transition for the spacing shrinking action*/
.pa-header .et_pb_row {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*set the background color of the fixed header when scrolling*/
.pa-fixed-header .et_pb_row {
padding: 0px 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}Here’s how that will look!
Change The Logo Size
You may also want to change the size of the logo when your menu shrinks. To do this, we need to add the following code snippet to our previous one.
/*set the transition for the logo shrinking action*/
.pa-header .et_pb_menu__logo img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*change the logo size when the header shrinks*/
.pa-fixed-header .et_pb_menu__logo img {
max-width: 80%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}Change The Menu Text Size
You may also want to change the size of menu text when your menu shrinks. To do that, just add the following code snippet to our previous one.
/*set the transition for the font size shrinking action*/
.pa-header .et_pb_menu ul li a {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*change the menu font size when the header shrinks*/
.pa-fixed-header .et_pb_menu ul li a {
font-size: 16px!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Hi Nelson, I followed step by step and couldn’t get it to work. I wasn’t able to see the effect on my site. Can’t figure out what I’m doing wrong. Thanks again.
Hi Nelson, I noticed why it wasn’t working because I had padding set on the row when I removed it it started working. The issue is when I remove the padding from the row my menu looks ugly, becomes to big. What can I do to fix that issue? Thanks
Hi Shawn, I can’t really help without a link or knowing exactly what you have tried. Can you tell me what steps you took and show me the site?
So, I followed step-by-step, and while my text and logo will change, I can’t get my actual header background (which is an image) to also shrink. Do you have a tutorial on how to do that?
Hi Catie,
To target the section, just remove the .et_pb_row from that snippet and use that. Then do whatever you want, such as reduce the spacing. Does that makes sense?
Hi Nelson! Thank you for your work! Content on you blog is amazing! Also I have one question. I followed all steps above and it worked perfectly, but there is one little thing I’m not able to solve. While on tablet and mobile view, menu changes to the hamburger icon. Problem is, that shrinking and changing color doesn’t apply on that icon and it stay as I customize it in the theme builder. Can you help me with that? 🙂
Hi Sehij,
I’m not exactly sure what you mean, but I am guessing you want to change the size of the hamburger icon on tablet and phone when you scroll?
Yes, I want to change size and color of hamburger icon.
This is great! I tried the one from Elegant Themes that took me too long and didn’t work. This is SUPER simple. Thank you!
Glad to hear this one is working! I do try to make it as simple as possible! 🙂
Hi Nelson, I followed step by step and it work perfectly.
How can I do the same thing to the search modul inside the header next to the menu?
What CSS code must I insert to shrink the search box?
Hi Bongi,
It will require finding the CSS classes of the search module as well as the property you want to change. If you share a link I can help you out!