Divi – Logo overlapping both header rows

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.

Background

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

The CSS

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%;
  } 
}

[sc name=”responsive-ad”]

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

[sc name=”learn css”]