Plugins

DiviMenus

DiviMenus - $36.75

A powerful menu builder that brings the coolest designs and popups to Divi!

Floating DiviMenus

Floating - $6.75

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $6.75

A DiviMenus add-on that brings the coolest Social Sharing buttons to Divi!

DiviMenus On Media

On Media - $6.75

Display DiviMenus on Images & Videos to add stunning Media options!

DiviSignatures

DiviSignatures - $14.25

Design Email Signatures with Divi and paste them into your Mail Settings!

DiviPasswords

DiviPasswords - $6.75

Password Protect sections, rows, columns and modules with Divi!

DonDivi

Layouts

Check these awesome layouts out. Already a DonDivi user? Download them from your account area!

Extra Tools

DonDivi plugins also include Exclusive Extra Tools to help you. Save money and forget additional plugins!

DonDivi

About us

We create premium tools for improving your creativity and simplifying the way to design stunning websites.

Special Bundle!

DiviMenus & Family

DiviMenus & Family - $69 ⚡

This stunning Bundle includes the DiviMenus plugin and its 3 new Add-ons:
Floating + Sharing + On Media.

Members

Log in

Access your downloads, layouts and support. If you have purchased at Elegant Themes > Register.

Documentation

Access all the detailed information about our plugins and get the most out of them!

FAQ & Support

Already a DonDivi user? Send us a ticket from your user area and we will reply as soon as possible.

Contact us

In web design, we may want the header to be always visible, fixed to the top of the document, so it is accessible to visitors while navigating the website. These headers are called fixed headers and we are going to show you in this post how to use them in your Divi post and pages.

Creating the fixed header

In order to create a fixed header you have to change the header position to fixed. In other words, you need to set the fixed value to the CSS position property and apply this style to the header.

Do we need to use CSS in Divi?

No, you don’t. Divi introduced the Position options a long time ago, so you only have to go to the Theme Builder, create your header and change the position from the header settings modal.

How do we change the header position in Divi?

You have to enter your header settings modal (typically a section), go to the Advanced Tab, open the Position toggle and select the Fixed option in the Position field.

The fixed header and the page content

Once you have created your fixed header, you will notice that both the header and the page content start on the top of the page, so they overlap, causing the page content to go underneath the header.

How do we prevent that overlapping?

You must add some offset to the page content so that the header does not sit on top of it.

How to add the page content offset?

Divi does not currently offer that option, so we will have to use CSS.

First, you need to identify the header. In order to do that, you have to assign a CSS ID to the section (you can easily do that from the section settings modal).

Let’s for example assign the fixed-header CSS ID to the section. 

Now, you can paste this JavaScript code into a module code (or into Divi > Theme Options > Integration > Add code to the <body>) to add an offset (padding top) to the page content.

<script>
jQuery(function($){
$('#et-main-area').css('padding-top', $('#fixed-header').css('height'));
});
</script>

This code will place the page content below the header.

In case you are using a DiviMenu inside the header and the Show After Page Load field is enabled, you may need to use this code to take into account the DiviMenu height as well.

<script>
 jQuery(function($){
     $('.dd-wrapper').css('display', '');
     $('#et-main-area').css('padding-top', $('#fixed-header').css('height'));
 });
</script>

That’s it!

Now, you are properly displaying a fixed header in your Divi post and pages.

Using sticky headers instead (no code required)

This is an alternative way to display fixed headers on the top of your post or page.

You can use the Divi Sticky options rather than the Divi Position options. This way, the header will become fixed when the user scrolls down the page. As a result, the header position will be fixed if the page is scrolled and relative (or the position you have set) otherwise.

In order to stick the section to the top, enter the section settings modal, go to the advanced tab and open the Scroll Effects toggle.

Now, you will also be able to use the Divi Sticky options to display a fixed header. In addition to that, you will be able to style the header elements when they are sticky (i.e. the page has been scrolled and the header has become fixed).

Feel free to choose the option that works better for you.