Divi Builder: Sticky Header

When you use the standard menu of Divi, it remains visible when you scroll down your pages. If you choose a custom menu in the Divi Builder, you have to make it sticky yourself if you want it to remain visible while scrolling on your pages.

Since the business coach we work with advices her clients to at least have the menu and social media buttons visible at all times, we decided to build sticky headers.

It is easy to do with the following steps.

Step 1: Build your header in 1 section

Make sure to put everything you want to remain visible in 1 section on the Divi Builder Header.

On this website I chose to keep the logo, social media and menu visible at the top at all times.

When you have built your header, save your work.

Step 2: CSS id & class

When you saved your work, go the the advanced tab in your section settings and choose CSS-id & class. 

At CSS-ID fill in: main-header

At CSS-class fill in: et-fixed-header

Save your work and leave the theme builder.

Step 3: CSS CODE

Go to Divi- Theme option – General

Scroll down to custom CSS and copy the following code into the black area.

			


					

						

							

							

							

						
						

							
							Get the Code!
							You have it!
							Use a different Browser
						
					
					
					

@media only screen and (min-width: 981px) {
main-header.et-fixed-header {
position: fixed;
     padding-top:30px;
 }
page-container {
padding-top:150px;
 }
 }

 
				
			
		

Step 4: Adjust height

Now it is important to have a look at the height of your header. On this website the height is 150px, but maybe yours is different. 

Adjust the height at padding-top to your own liking.

That’s it. Let me know if this helped you out and maybe you even like to share your header with me.

Leave me a comment below

Are we connected on social media yet?

DNT is affiliate of the nicest tools available, like this one. This means if you click on the links and purchase something, we will receive an affiliate commission.