How to Automatically Place Your Header Below Each Page’s First Divi Section

Last Updated on September 16, 2022 by 10 Comments

How to Automatically Place Your Header Below Each Page’s First Divi Section
Blog / Divi Resources / How to Automatically Place Your Header Below Each Page’s First Divi Section

Ever since the Divi Theme Builder has come out, weโ€™ve been sharing tutorials on how to create and customize a header to match it with different needs you might have. In todayโ€™s tutorial, weโ€™ll continue that journey by showing you how to automatically place a custom header below each pageโ€™s first Divi section. This approach allows visitors to see the hero section of your pages first and then get access to the menu and all its items. The style weโ€™re using for the custom header matches the Bistro Layout Pack, youโ€™ll be able to download the custom page template for free as well!

Letโ€™s get to it.

Preview

Before we dive into the tutorial, letโ€™s take a quick look at the outcome across different screen sizes.

Desktop

first Divi section

Mobile

first Divi section

Download The Custom Header Template for FREE

To lay your hands on the free custom header template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youโ€™re already on the list, simply enter your email address below and click download. You will not be โ€œresubscribedโ€ or receive extra emails.

1. Go to Divi Theme Builder & Add New Page Template

Go to Divi Theme Builder & Add New Template

Start by going to the Divi Theme Builder and add a new template.

first Divi section

Use On

Use this new template on all pages.

  • Use On: All Pages

first Divi section

2. Start Building Custom Header Design

Continue by building a custom header inside the page template.

first Divi section

Section Settings

Background Color

Once inside the template editor, youโ€™ll notice a section. Open that section and change the background color.

  • Background Color: #FFFFFF

first Divi section

Spacing

Remove the sectionโ€™s default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

first Divi section

Border

Add a top and bottom border too.

  • Top & Bottom Border Width: 1px
  • Top & Bottom Border Color: #002d4c

first Divi section

CSS ID

And include a CSS ID. Later on the tutorial, weโ€™ll use this CSS ID to place the section below each pageโ€™s first section.

  • CSS ID: custom-header

first Divi section

Z Index

Last but not least, weโ€™ll increase the sectionโ€™s z index to make sure it appears on top of all page content.

  • Z Index: 99999

first Divi section

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

first Divi section

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire sectionโ€™s width.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

first Divi section

Spacing

Remove all default top and bottom padding as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

first Divi section

Main Element

To make sure all columns remain next to each other on smaller screen sizes, and to center the column content, weโ€™ll also add two lines of CSS code to the rowโ€™s main element.

display: flex;
align-items: center;

first Divi section

Column 1

Spacing

Continue by opening the column 1 settings and add some top and bottom padding to the spacing settings.

  • Top Padding: 20px
  • Bottom Padding: 20px

first Divi section

Border

Add a right border to the column as well.

  • Right Border Width: 1px
  • Right Border Color: #002d4c

first Divi section

Add Image Module to Column 1

Upload Logo

Time to start adding modules! In column 1, weโ€™ll need an Image Module. Upload your logo.

first Divi section

Alignment

Move on to the moduleโ€™s design tab and change the image alignment.

  • Image Alignment: Center

first Divi section

Sizing

Modify the moduleโ€™s width across different screen sizes too.

  • Width: 4vw (Desktop), 7vw (Tablet), 12vw (Phone)

first Divi section

Add Menu Module to Column 2

Select Menu

On to the second column, there, weโ€™ll need a Menu Module. Select a menu of your choice.

first Divi section

Layout

Move on to the moduleโ€™s design tab and change the layout settings as follows:

  • Style: Centered
  • Dropdown Menu Direction: Downwards

first Divi section

Menu Text

Modify the menu text settings too.

  • Menu Font: Cabin
  • Menu Text Color: #77848d
  • Menu Text Size: 16px (Desktop), 15px (Tablet), 14px (Phone)
  • Menu Line Height: 1.8em

first Divi section

Dropdown Text

Then, change some colors in the dropdown text settings.

  • Dropdown Menu Background Color: #ffffff
  • Dropdown Menu Line Color: #002d4c

first Divi section

Icons

And complete the moduleโ€™s settings by changing the hamburger menu icon color in the icons settings.

  • Hamburger Menu Icon Color: #002d4c

first Divi section

Add Button Module to Column 3

Add Copy

On to the next and last column. There, weโ€™ll need a Button Module. Add some copy of your choice.

first Divi section

Alignment

Move on to the moduleโ€™s design tab and change the button alignment.

  • Button Alignment: Center

first Divi section

Button Settings

Continue by styling the button in the button settings.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 13px
  • Button Text Color: #002d4c
  • Button Background Color: #ffffff
  • Button Border Width: 2px
  • Button Border Color: #ffffff (Default), #d1d1d1 (Hover)
  • Button Border Radius: 0px

first Divi section

  • Button Letter Spacing: 2px
  • Button Font: Cabin
  • Button Font Weight: Semi Bold
  • Button Font Style: Uppercase

first Divi section

Spacing

Then, add some custom padding across different screen sizes.

  • Top Padding: 16px
  • Bottom Padding: 16px
  • Left Padding: 24px (Desktop & Tablet), 13px (Phone)
  • Right Padding: 24px (Desktop & Tablet), 13px (Phone)

first Divi section

Box Shadow

Complete the moduleโ€™s settings by adding a box shadow.

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 0px
  • Box Shadow Blur Strength: 0px
  • Box Shadow Spread Strength: 2px (Default), 6px (Hover)
  • Shadow Color: #002d4c
  • Box Shadow Position: Inner Shadow

first Divi section

3. Automatically Place Header After Each Pageโ€™s First Section Using JQuery

Add Code Module to Column 2

Now, to automatically place the menu below each pageโ€™s first section, weโ€™ll need a bit of JQuery code. To include this code in our custom header, add a Code Module to column 2.

first Divi section

Insert JQuery Code

Add the following lines of JQuery code, between script tags as you can notice in the print screen below, to the Code Module to apply the effect:

jQuery(function($){
$(โ€˜#custom-headerโ€™).insertAfter(โ€˜.et_pb_section_0โ€™);
});

first Divi section

4. Save Theme Builder Changes & View Result

And complete the custom header by saving all theme builder changes and viewing the outcome on your pages!

first Divi section

first Divi section

Preview

Now that weโ€™ve gone through all the steps, letโ€™s take a final look at the outcome across different screen sizes.

Desktop

first Divi section

Mobile

first Divi section

Final Thoughts

In this post, weโ€™ve shown you how to automatically place the custom header you build using Diviโ€™s Theme Builder after each pageโ€™s first Divi section. Youโ€™ll only need to build the custom header once, add the JQuery code and the custom header will automatically be repositioned. This is a great way to change up the menuโ€™s normal top-page position and allow your hero section to shine first. You were able to download the template for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below!

If youโ€™re eager to learn more about Divi and get more Divi freebies, make sure youย subscribe to our email newsletterย andย YouTube channelย so youโ€™ll always be one of the first people to know and get benefits from this free content.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! ๐Ÿ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow ๐Ÿ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How ๐Ÿ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site for Estheticians (Quick Install)

New Starter Site for Estheticians (Quick Install)

Posted on November 12, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Divi 5 Update: Public Alpha Version 3

Divi 5 Update: Public Alpha Version 3

Posted on November 11, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. As we progress towards the final release, we’ll update Divi 5 every two weeks, appearing as a standard update in your WordPress dashboard. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 3ย today. Thanks...

View Full Post

10 Comments

  1. jQuery(function($){
    $(โ€˜#custom-headerโ€™).insertAfter(โ€˜.et_pb_section_0โ€™);
    });

    This function does not appear to be placing the first section above my header?

    • For me too..

  2. Thanks for this. I was earlier adding all the headers manually for my blog. Do you think making the header dynamic will speed up the page loading compared with adding header manually for each section?

  3. Is there a way to place it in the footer too?

  4. Nice post thanks for sharing

    • Thanks For your Post. Just awesome

  5. Great stuff as usual Donjete.

  6. Thank you, it’s a very good idea, i love it!

  7. Very good! All it needs now is for the logo and nav to go sticky once scrolling kicks in. I think that possibility will happen with a future Divi update?

    Suggestion. While it is always good for us to tweak these designs a bit further to fit our own designs. I think these tutorials would benefit the end user with a bit more finesse. For example, on tablet/mobile the menu when open occupies a narrow drop down column. It looks far better if the menu opens from the bottom of the menu and if it is full width. Something like the following styling was added in another header tutorial and it just adds that bit more value to the offering:

    .mobile_menu_bar { padding: 30px 0; }

    .et_mobile_menu {
    width: 350% !important;
    margin-left: -120% !important;
    }

  8. Thank you!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today