The new Divi Theme Builder allows you to create a custom header using the Divi Builder and any of its modules. That header template can then be assigned to any page or post type on your website.

By default, the header section template you assign via the Theme Builder will not be fixed or sticky and currently, there are no built-in options for making it that way. When you assign a header template it will disappear off the page with the rest of the page content as the user scrolls down the page.

If you would like your header to be either fixed, or sticky, you can add the code in the article below within your Theme Builder templates.

What is a Divi fixed header?

A fixed header for Divi will be fixed to the top of the screen at all times, including when the user scrolls up or down the page. This is best used for a relatively slim header that does not take up too much screen real-estate.

divi-theme-builder-fixed-header

 

What is a Divi sticky header menu?

A sticky Divi header menu will initially be shown with some other header content above it. As the user scrolls down the page, the content above the menu will disappear off the screen and the menu will stick to the top of the screen. This is a good option if you want to include extra content into your header but do not want to take up too much screen real-estate with that content.

divi-theme-builder-sticky-menu

1. Make your Theme Builder header fixed with CSS

To make your custom Thee Builder header fixed to the top of the screen at all times you will need to add the CSS code below into the section that contains your header.

  1. Go to Divi > Theme Builder and click on Add Global Header
  2. Add a section and build your header using the Divi rows and modules
  3. Open your sections Advanced Settings > Custom CSS > Main Element
  4. Add the following CSS

2. Make your Divi Theme Builder header sticky

If you want to make your Theme Builder custom header sticky you will need to build the header with 2 sections as in the instructions below;

  1. Go to Divi > Theme Builder and click on Add Global Header
  2. Add 2 sections and build your header using the Divi rows and modules
  3. Open your sections Advanced Settings > CSS IDS & Classes for the section you want to be sticky
  4. Add a CSS ID myheader
    add header CSS id
  5. Add a Divi code module below your header sections with the following code added into the content area.

    divi sticky menu code
  6. You can adjust the height value from 150px to match the height of your non-sticky header section (in this example it is the 4 blurbs in the top section of the header)

This video will show you how the fixed and sticky headers will be applied with the Divi 4 Theme Builder

Download the Sticky & fixed Theme Builder templates

You can download the Divi Theme Builder templates for both the Divi sticky header and the fixed header on the Divi Theme Examples website. You will need to use the social share buttons to unlock the download link, but all the code is available above if you prefer to create the headers yourself.

download files on Divi Theme Examples

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close