Code by Day | Explore By Weekend

How To Shrink The Divi Theme Builder Fixed Header Menu When Scrolling Tutorial by Pee-Aye Creative

How To Shrink The Divi Header Menu When Scrolling

Today I'm showing you how to shrink the Divi Theme Builder header menu when scrolling while keeping it fixed at the top of the page.

#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.”

create a custom fixed Divi Theme Builder 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.

Builder the Divi Theme Builder header and set default background color and add class

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.

set the position of the Divi header to fixed.png

#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!

add code to Divi to make the header menu fixed on scroll

#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;
}

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;
}
39
Last updated Jan 3, 2021 @ 1:04 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
35 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Shawn
Shawn
9 months ago

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.

Shawn
Shawn
9 months ago

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

Catie
9 months ago

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?

Serhij
Serhij
7 months ago

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? 🙂
 

Last edited 7 months ago by Serhij
Serhij
Serhij

Yes, I want to change size and color of hamburger icon.

Ingrid
Ingrid
7 months ago

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!

Bongi
Bongi
7 months ago

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?

Alex
Alex
6 months ago

Hi Nelson. Thanks for your generous tutorials!

My header is shrinking so long as I leave the ‘row padding value’ as default/blank in the builder. How can I make it shrink if I want to alter the padding size in the builder first?

Also, I’ve taken your advice and created a child theme. But I’m confused as to where I should put the <script> code you have above in the child theme?

Best wishes to you!

Mark McGowan
5 months ago

Hi Nelson,

Great tutorial, as ever, thanks! I’ve got the header shrinking, but I can’t figure out what I’ve done wrong, as it’s ‘covering’ the top of the content?

Example here:

http://markm73.sg-host.com/projects/

If you could advise what I’m doing wrong, I’d be massively grateful!

Thanks,

Mark

Mark McGowan

Hi Nelson,

Apologies, I found the answer on another on your (fantastic!) tutorials here – https://www.peeayecreative.com/how-to-automatically-stop-your-fixed-divi-header-from-overlapping-the-page-and-push-it-down-instead/

Couldn’t figure out what element to add padding to and the Special Circumstances section of this tutorial sorted it out, thank you again!

Thanks,

Mark

Manuel
3 months ago

Hi Nelson, thank you so much for doing this channel here. I tried all the manual what you show and it works. Now I want to scale a Image Template and the code is for a Logo. You have some Code for scale a image what i can put under the divi option custom css? Thank you for your answer.

Sadman Sakib
Sadman Sakib
2 months ago

Hi Nelson,
Thanks for this tutorial. I was copying your code and pasting but it was not working. But when I looked carefully that your snippet code and the image code is not the same. I think there is something wrong. I hope you will check it.

I think the code will be this

/*set the default background color at the header section*/

.pa-header{
background: transparent;
}

/*set the background color of the fixed header when scrolling*/

.pa-fixed-header{
background: white;
}

By the way thanks for the life saving tutorial.

add-CSS-code-to-Divi-to-make-the-header-menu-fixed-on-scroll.png
Sadman Sakib
Sadman Sakib

Please go to that section of your post. You will find that.

Last edited 2 months ago by Sadman Sakib
Sadman Sakib
Sadman Sakib

Check out the attached image.

add-CSS-code-to-Divi-to-make-the-header-menu-fixed-on-scroll.png
Sadman Sakib
Sadman Sakib

Thank You Nelson. This is the only tutorial that solved my problem in the easiest way.

Mickey Diener
2 months ago

Hi Nelson, As always, thanks for this tutorial. For my custom header, I have 3 columns. One is an image (instead of using the logo of the menu), next is the menu and the last column is a button. I am having issues determining the right class to target for the image in column 1 and the button in column 3. I’ve determined that for shrinking the button the CSS I need is something like: padding-top: 0px !important;    padding-bottom: 0px !important;    font-size: 15px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s… Read more »

Mickey Diener

Hi Nelson,

I had changed the class from .pa-sticky-header to .jwoc-sticky-header in the section and in the code itself. I wanted to identify it more closely with my client but did make an attribution in the code itself.

Thanks!

Mickey Diener

Thanks again, Nelson. Sorry, I had documented this to you incorrectly. OK, so the class assigned to the section is .jwoc-header. From the Jquery code in the head section, it changes to .jwoc-fixed-header. I was able to target the image in column 1 based on your suggested code above, but I cannot seem to target the button in column 3. Here’s the CSS code I have in Divi Options to try to target the button to shrink, but it’s not working. Looking in dev mode on the browser, it seems that this is being overridden. I’m wondering if I am… Read more »

Les Hunt
Les Hunt
1 month ago

Is there a way to control the height of the shrunken menu bar?

Evan
Evan
1 month ago

Very nice. Much better than Divi’s official tutorial.

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart