This is a cool way to add a whole section (or layout if you wish) above the main navigation and then have it stick to the top during scroll. It’s pretty cool.

Preview

This is what it looks like:

View post on imgur.com

 

You need this

To start with, go get the child theme,

or if you’re using a child theme, add this code to your functions.php

And make sure your header is set to stick to the top.

Divi  - A section above the main header

 

The video

 

The code

Here’s the php code you need to add right above header id=”main-header” in the header.php file. (copy the header.php from Divi into the child theme if it’s not already there. Edits to the child theme file won’t be lost on updates to the parent theme)

<?php if ( is_home() || is_front_page() ) : 
	echo do_shortcode('[ai_layout_sc id="000000"]');
 endif ?>

Please change the shortcode id number to whatever number your section had in the library.

Then add this CSS

.home.page #page-container {
 padding-top:0px !important
}
.home.page #page-container header#main-header {
 position:relative;
 -webkit-transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 -o-transition:all 0.5s ease-in-out;
 -ms-transition:all 0.5s ease-in-out;
 transition:all 0.5s ease-in-out
}
.home.page #page-container header#main-header.et-fixed-header {
 position:fixed;
 -webkit-transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 -o-transition:all 0.5s ease-in-out;
 -ms-transition:all 0.5s ease-in-out;
 transition:all 0.5s ease-in-out
}
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

and you’re done!

 

Divi  - A section above the main header To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! Start learning proper CSS for Divi

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

 

Photo by Li Yang on Unsplash