Displaying the page content below a fixed header

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.