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.
@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.

Linda de Pagter
Digital Nomad, Web designer
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.
0 Comments