header.php<\/em> file from Divi into our child theme, WordPress will overwrite Divi's file with ours.<\/p>\n\n\n\nWe do this so that whatever changes we make won't be overwritten the next time Divi is updated.<\/p>\n\n\n\n
I'm doing this with Divi 4.4.3, which is the most recent version as of 13 April 2020.<\/p>\n\n\n\n
The easiest way is to take a copy of the header.php<\/em> file and upload it or paste it into the root directory of your child theme.<\/p>\n\n\n\nI'm not going to paste the whole code here, because it's unnecessary and way too long for what we're doing here.<\/p>\n\n\n\n
If you look at the code, you'll see:<\/p>\n\n\n\n
if ($et_top_info_defined && ! $et_slide_header || is_customize_preview()):<\/code><\/pre>\n\n\n\nThat's the start of the top header code. On my version, it's line 56.<\/p>\n\n\n\n
At the end of that section, just above the endif<\/em>, you should see this line:<\/p>\n\n\n\necho et_core_intentionally_unescaped( apply_filters( 'et_html_top_header', $top_header ), 'html' );<\/code><\/pre>\n\n\n\nThat line tells Divi to output the top header at that point in the code.<\/p>\n\n\n\n
Make sure you're working on the file in the child theme, not the main Divi theme.<\/p><\/blockquote>\n\n\n\n
Copy that code, then comment that code out like so:<\/p>\n\n\n\n
\/\/echo et_core_intentionally_unescaped( apply_filters( 'et_html_top_header', $top_header ), 'html' );<\/code><\/pre>\n\n\n\nScroll down until you see this line:<\/p>\n\n\n\n
<header id=\"main-header\" data-height-onload=\"<?php echo esc_attr( et_get_option( 'menu_height', '66' ) ); ?>\"><\/code><\/pre>\n\n\n\nOn my version, it's line 235.<\/p>\n\n\n\n
Immediately under that line, paste the echo you copied from above, wrapped in php tags like this:<\/p>\n\n\n\n
<?php echo et_core_intentionally_unescaped(\n apply_filters( 'et_html_top_header', $top_header ), 'html'\n); ?><\/code><\/pre>\n\n\n\nI've added line breaks here to make the code easier to see in this tutorial.<\/p>\n\n\n\n
For compatibility and to avoid error messages, I like to wrap it in the same if statement<\/em> that was used to create the top header.<\/p>\n\n\n\nI mentioned the if statement<\/em> above in this section.<\/p>\n\n\n\nPutting them both together, the code you'd put under the <header id=\"main-header\"> line would look like this:<\/p>\n\n\n\n
<?php if ($et_top_info_defined && ! $et_slide_header || is_customize_preview()) {\n echo et_core_intentionally_unescaped(\n apply_filters( 'et_html_top_header', $top_header ), 'html'\n );\n} ?><\/code><\/pre>\n\n\n\nSave your work and you should see the top header inside the main header.<\/p>\n\n\n\n
It shouldn't look different visually. If it does, you might need to tweak the CSS code.<\/p>\n\n\n\n
When you look in the code using Inspector<\/a>, it should go from being outside the <header> section like so:<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nTo being inside the <header> section like so:<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nI 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[16],"yoast_head":"\n
How To Move Divi Top Header Inside Main Header<\/title>\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\t \n\t \n\t \n