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!
▶️ Please watch the video above to get all the exciting details! 👆
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.
Divi 5 Compatibility:
1. Set the z-index to 10 in the section settings.
2. Instead of using Position = Fixed, use “Stick To Top” in the Scroll Effects toggle.
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!
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<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
Copy and paste the following code snippet into your website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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;
}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, This looks great and I’d like to implement it but I have a few concerns. I am using the your Divi Mowing child theme and the header section with the menu that I’d like to shrink on scroll already has a css class name “pa-menu”. This child theme has 2 sections in the custom header. If I change the css class name won’t that disable something? I am think that I can just change the name of the css class name in all the scripts… will that work.
The second issue I’m having is that when I change the section position to fixed the section above the menu section goes away. RIght now the position is set to relative. Is there a way to set this section to fixed without the top section that goes away on scroll not be affected?
The last thing is that I added a duplicate of the menu for mobile so that the menu item in the top section that do not appear on mobile are available in the main menu on mobile. I’m assuming that this shouldn’t effect anything since its in the section and will also shrink on scroll on mobile, correct?
Any insight or suggestions would be greatly appreciated.
Hi Gregory!
1. You can use the same pa-menu class and change the class in the code. You can add the pa-header class in the module along with it.
2. Please note that using position fixed method. Please use the scroll effects in advanced tab and set the position to stick to top. It will adjust the offset value itself.
3. The mobile should not effect anything.
Hope it helps!
Hi Hemant, yes I think that does help. I will let you know if I have any problems with it. Thanks!
Hi Nelson
This is not working anymore in divi5 alpha. Is there something changed and is there a fix for divi5?
Thanks!
Jelle!
We have added a note above for the changes needed in Divi 5. Please try and let us know if it helps!
Hi!
Can you also disable the shrink on mobile? So I only want it to shrink on desktop.
Thank you
Hi Jelle!
Please add all the above CSS code in the following media query:
@media all and (min-width: 981px){
//CSS code
}
Hope it helps!
Hello Nelson,
Great tutorial as always, I have one question though how do I control how much does it shrink because it is shrinking too much, it seems that it shrinks to the border of the image.
My (special) header section has a transparent background. When scrolling, the background of the row turns white. I would like the background of the section to be white. Is this possible? I can’t figure it out.
Hi Anneloes,
Could you please make sure that you are providing the Custom Class to the Section and not the Row?
If you have given it to the section then could you please share the URL of the page for me to investigate further?