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:
Divi - Logo overlapping  both header rows

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:
Divi - Logo overlapping  both header rows

 

The new header

Here’s what we’re making:
Divi - Logo overlapping  both header rows

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

Hey, if you’re interested in learning more CSS and how to make divi more responsive, check this out:

Divi - Logo overlapping  both header rows

 

Also… if you’re interested in learning CSS properly, then subscribe to the newsletter for an exclusive offer later when the “Proper CSS Crash Course for Divi users” course is released.

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!