Here’s a really simple way of making a header with a logo that overlaps both header rows. With JUST CSS. So it’s pretty neat.


I had a tutorial request for this header:

It’s a nice funky site. If you want to check it out yourself, go ahead. It’s made with Divi, and there’s been some edits to the header.

The top header (the section with the phone number and email) is not used, rather, it adds an additional section (seems to be just straight up php+html) under the main header. Since the logo was changed to be larger than default, it would overhang below the main header and the newly added section.


I’m going to try something a little bit simpler and easy to do.


note: the search function, we’re going to ignore since it’s not only specific to the client, but it involves adding a search plugin and including the shortcode in the header and stuff. If you want to check out how to add your own divi layout to the header, check out the following:


The new header

Here’s what we’re making:

It might look… different, but the basic structure is the same, just not fully styled.

The difference is that we’re using the two menus that come with Divi. So the top header will stay up there, and the main header will stay where it normally does.

You’ll have to take out the phone and email to avoid having the logo cover the contact details.

In this Divi tweak, the main idea and the important solution we need to address is how to make things overlap on top of each other, because z-index is not always the answer. There are many cases where z-index: 10000000000888888999; won’t work.

I explain how this works a bit in the video.


The video



Take the CSS below and drop it in either
the theme options > custom CSS field, or in
the customizer > custom css, or in
your child theme’s style.css file.

#top-header {
  z-index: 1;
#main-header {
  z-index: 2;
#main-header .logo_container {
  top: -24px;
  width: 170px;
  z-index: 100;
#logo {
  max-height: 200%;
@media all and (max-width: 479px) {
  #main-header .logo_container {
    top: 0;
  #logo {
    max-height: 80%;


To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive


Also… if you’re interested in learning CSS properly…

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi



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!

You will also get a discount coupon in your inbox as soon as you sign up!