How To Move Divi Top Header Inside Main Header

On the default Divi install, the top header sits outside the <header> section.

For accessibility and web standards reasons, Divi's <div id="top-header"> should be contained within the main <header> section.

The alternative is to wrap it in <div role="banner">, as explained at Deque University.

How to move Divi top header inside the main header:

• Install and activate a Divi Child Theme, if you haven't already.
• Copy header.php from Divi to the child theme
• Move the top header echo to the main header section

This one's a bit of a doozy to explain, but it's simple enough once you get it.

We want to move the darker banner at the top, so it sits inside the container with the lighter background.

We don't want to change how it looks, just how the code behaves.

Copy header.php from Divi to the child theme

By copying the header.php file from Divi into our child theme, WordPress will overwrite Divi's file with ours.

We do this so that whatever changes we make won't be overwritten the next time Divi is updated.

I'm doing this with Divi 4.4.3, which is the most recent version as of 13 April 2020.

The easiest way is to take a copy of the header.php file and upload it or paste it into the root directory of your child theme.

I'm not going to paste the whole code here, because it's unnecessary and way too long for what we're doing here.

Move Top Header echo to Main Header

If you look at the code, you'll see:

if ($et_top_info_defined && ! $et_slide_header || is_customize_preview()):

That's the start of the top header code. On my version, it's line 56.

At the end of that section, just above the endif, you should see this line:

echo et_core_intentionally_unescaped( apply_filters( 'et_html_top_header', $top_header ), 'html' );

That line tells Divi to output the top header at that point in the code.

Make sure you're working on the file in the child theme, not the main Divi theme.

Copy that code, then comment that code out like so:

//echo et_core_intentionally_unescaped( apply_filters( 'et_html_top_header', $top_header ), 'html' );

Scroll down until you see this line:

<header id="main-header" data-height-onload="<?php echo esc_attr( et_get_option( 'menu_height', '66' ) ); ?>">

On my version, it's line 235.

Immediately under that line, paste the echo you copied from above, wrapped in php tags like this:

<?php echo et_core_intentionally_unescaped(
  apply_filters( 'et_html_top_header', $top_header ), 'html'
); ?>

I've added line breaks here to make the code easier to see in this tutorial.

For compatibility and to avoid error messages, I like to wrap it in the same if statement that was used to create the top header.

I mentioned the if statement above in this section.

Putting them both together, the code you'd put under the <header id="main-header"> line would look like this:

<?php if ($et_top_info_defined && ! $et_slide_header || is_customize_preview()) {
  echo et_core_intentionally_unescaped(
    apply_filters( 'et_html_top_header', $top_header ), 'html'
  );
} ?>

Save your work and you should see the top header inside the main header.

It shouldn't look different visually. If it does, you might need to tweak the CSS code.

When you look in the code using Inspector, it should go from being outside the <header> section like so:

To being inside the <header> section like so:

I hope I've explained this clearly enough. If I didn't and you'd like me to clarify anything, please let me know in the comments.