Divi – Logo overlapping  both header rows

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”]

 

[gravityform id=”1″ title=”False”]

 

Why no ads?

Hi, my name is PK, and welcome to my website, almost inevitable design. I maintain and publish on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.
  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to product better content.

Any bit of interest helps. Even sharing with your feidns, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

The Web Design Space

TWDS is my web design agency. If you're looking for premium quality, reliable, web design and development, come see what we're about!
Learn More
Choose "Paythen" at checkout for an interest free 10 week payment plan.
Leave a Reply

Your email address will not be published. Required fields are marked *

    New tutorials