How to Create an Overlapping Logo in Divi
Welcome to part 8 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.
In this tutorial, I show you “How to Create an Overlapping Logo in Divi.” I’ll show you in detail how to make the logo overlap the top menu whether you have fixed navigation checked or not. I also walk you through how to “shrink” the logo on scroll so when you scroll down, the logo sits nicely in the menu. I hope this helps you take your Divi logo game to the next level!
Here’s the CSS I used:
/*----------Overlapping Logo that Shrinks on Scroll----------*/
#et-info {
float: right;
}
.et_fixed_nav #top-header {
position: fixed;
z-index: 9998!important;
}
#logo {
max-height: 100px;
margin-top: -30px;
}
.et-fixed-header #logo {
max-height: 60px!important;
margin-top: 0px;
}
@media only screen and (max-width: 980px) {
#logo {
max-height: 70px;
margin-top: 0px;
}
#et-info {
float: none;
}
}
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Thank you, thank you, thank you, I was looking for just that!
Awesome, Paulo! No problem man. There’s nothing better than finding a tutorial right when you need it 🙂
Hi, my friend Josh Hall. I was owing the result of the work using this tutorial. I had to make some adjustments because of the size of the logo and some top information. The client liked the result very much and so did I. Thank you for helping me. http://parquetsp.com.br/
Awesome to hear, Paulo! Looks great! Love seeing my tutorials in action. Thanks so much for sharing!
Just came across your site – marvelous tutorial! Thanks so much – you’re an excellent teacher – will be back!
Thanks, Larry! Much appreciated 🙂 The next tutorial drops today!
First al all: thank you for your amazing videos !!!
I’m newbee and maybe a studid question: where exactly is the css file you use?
Thank you again
Hey Elsa, thank you! And no problem, it’s not a stupid question at all. I’ve been asked a lot here recently so my next tutorial will cover just that! Essentially, I use my Text Editor and connect to the style sheet via FTP. Look for that tutorial within the next week!
Hi Josh,
thank you! Sure!! I’m waiting your next video!! the rest it’s very clear and you explain so well! But in the meanwhile, which file are you editing in this concrete case?
Best Regards! And please go on lighting all of us! 😀
Elsa
Thanks, Elsa! My next tutorial is going to be on how I edit the style sheet so look for that this week!
Here you go, Elsa! As promised 🙂 https://joshhall.co/where-to-put-your-custom-css-in-divi/
Hey Buddy,
Cheers for this it’s transformed my website.
However I have a slight problem I was wondering if you could help me with? On the safari all these changes take effect great but they’re not changing on chrome and it ends up just looking like a miss mash of logo and text.
What am I doing wrong?
Andy, can you provide a link? Hard to tell what it may be without looking at it. Of all browsers, it should work on Chrome before any others!
http://www.allaboutmefitness.co.uk
The header looks really nice in safari, but on chrome its all stuck over the left hand side.
Logo looks good to me, Andy! You get it fixed? Nice site by the way. I hate to plug my own product but I noticed that you have a slider with text and a button over them. I’d highly recommend my fixed elements over slider that would probably help out with that! https://joshhall.co/product/fixed-elements-over-divi-slider/
Nope still not fixed hmmmm… On all the chrome browsers it looking messed up :-/ I just don’t get it. Safari it looks perfect but Chrome its all over the left hand side and the logo doesn’t float over the top bar.
Thanks I will look into it 🙂
Yeah it looks ok on my end. Weird…keep me posted.
Hey Josh,
Thanks for the great tutorial.
I need some help on how to do this for a centered logo like you did on turnersbarbershop.com.
What CSS did you use to achieve that style?
Thanks again!
Thanks, Dominic! That’s actually just a standard Divi menu setting. Inline centered logo in your Divi theme options then you’re good to go!
Hi Josh
Thank you so much for great tutorials.
Please can you maybe help. I did this on my site https://www.johnnieandpaw.co.za/
But now this menu super imposes on everything. If you can check my secondary (top) menu, it drops behind the main menu, and then when I click on ‘quick vies’ in the products area, the menu is also above everything.
Can you direct me to a solution for this?
Thanks 🙂
Hi Maryke, I’m not sure of the issue exactly. I think it’s working correctly, you probably just need to adjust the sizing of the CSS so it doesn’t overlap the words. Hope that helps!
mate you saved my life when i finish this job ill send you and you lovely wife out for dinner
Great to hear! Much appreciated, Adam 🙂
Great tutorial I’ve been successful using it within the Divi Theme however I have a website that is using WP Bakery as a page builder and would like to utilize your concept there as well can you provide any assistance? It would be greatly appreciated.
Thank you in advance!
https://doradocloud.com
Not familiar with that theme but since this is all CSS based, I’m sure it’s possible. You’ll just need to identify the classes then adjust the CSS accordingly!
Hello Josh,
I can’t seem to get this working on my site. I’m doing centered logo too but I have words on either side of it as part of the logo. How would I push the menu buttons/text away from logo to give the image more room to increase the size? I also can’t get it to increase the image big enough to overlap like turnersbarbershop.com
My site is http://www.nellisart.com
I’m sure you’re busy but any advice would be awesome.
Thanks
Hey John, you could try adding some margin or padding to the logo class to give you some more room! That’s probably where I’d start. Or add more space around the logo image itself.
Hi Josh, thank you so much for this tutorial.
Is there a way to prevent the super sized logos on subsequent pages on a site? I am playing with overlapping the logo on the front page, but I want to only have the shrunk Logo on all other pages.
http://www.shangilia.de
Thanks, Thomas
mmm you can add .home in front of the CSS to make adjustments just to the logo on the home page then adjust the other pages accordingly. The other thing I’d recommend is to try the mhmm plugin from Superfly which is pretty user friendly for that kind of functionality.
Don’t want to sound like an apple-polisher, but your tutorials are very clear. It would be great if you could put together a whole course for Divi and CSS. I’d be willing to select the custom amount up above.
Take care!
Hi Josh! What’s Up! Thanks for your tutorial. Here from Brazil!
I’m trying to do do the same thing, but, because I’m using the centered logo the menu keep’s over him. How do I fix it?
http://ecociranda.com.br/inicio/
Looks like it’s working from what I see!
Hey Josh Thank you tons. Im having some logo issues and I’d like to do that overlay you are teaching. However my logo is super small after Ive increased my max logo height in customizer to 100% and its 250×197. Ive placed it in the divi theme options and just can not seem to get it to size. Is your logo in the the top header? How can i fix this so i can continue the tutorial on overlay? what am i doing wrong!
Hey Brent, nope my logo is in the customizer as well. I think you’d just have to set the height or max with in the CSS to make it go larger than 100%. That’s how I do it.
Hope that helps!
Hey Brent, you’ll probably need to adjust the height and max width of the logo in CSS. Yeah the customizer limits it to 100% but that is where I put my logo as well. Hope that helps!
Hey Josh,
What divi theme are you using for your “How-To’s”?
All custom my man – no pre-built theme 🙂 Just a lot of custom CSS throughout Divi and the modules.
Thank you very much for your tutorial!!! I save me.
Awesome to hear! No problem 🙂
I love this! My client wanted a centered logo and this worked. Any chance you could tell me what I am missing for the mobile view? This looks great on desktop but on my phone, the top info is cut off, there is a white space below the logo container and when I scroll the logo & menu disappear.
Hey Kathleen, yeah you may need to adjust it on mobile depending on the size of the logo and padding. Might just take a little CSS tweaking!
Hello Josh, New to the site and Divi. I wanted to know if the latest updates have made this method different. I am trying to use the tips you have provided but it seems that the top menu overlaps the logo. Like the 2nd menu is in from of the main menu. Any suggestions on this?
I’m on the newest version of Divi and this effect still works for me!
Oh my gosh, it took a combination of 3 tutorials and my own knowledge of CSS in order to get this to work for my situation, but I finally did it!
Josh, your tutorial ended up being by far the most helpful, so wanted to say thank you!
Awesome Jeremy! Glad to hear you got it worked out. If you’re interested in taking your CSS game to the next level and you like my teaching style, I think you’d love my CSS course and would get a lot out of it. If interested, use coupon code CSS10 to get 10% OFF to join!
Hi Josh, I joined your newsletter. Your stuff is awesome! thank you, thank you, thank you.
I have added the code and tweaked. I like the logo large like I have it now on desktop. However, it does not shrink enough. How can I get it to shrink more?
The site is: http://dumpsterrentalsuffolkny.com/
Thanks, Joe! You can use the theme customizer to adjust the logo height or get more detailed with it by adjusting the CSS. I’d probably do this code based on your site:
#logo { max-height: 150%; }Very helpful and clever CSS overrides….love the effect. I’ve been partially successful in duplicating it, but I’m running into a shadow/border appearing between the top and second menu when scrolling down the page. I’ve tried adjusting the following:
#main-header.et-fixed-header {
/* -webkit-box-shadow: none; */
-moz-box-shadow: none;
/* box-shadow: none; */
but it keeps showing up.
The page was developed from Divi’s restraurant pack…if that makes a difference.
Would appreciate any guidance. Thanks
I have the same problem.
#main-header.et-fixed-header {
box-shadow: 0 0 0px rgba(0,0,0,.1)!important;
}
Very nicely explained !
Thank you, after trying a few css suggestions from other websites; yours worked best and did just what I needed for my logo and menu perfectly, thank you.
Great to hear, Pauline!
Thanks Josh, very helpful stuff!!
Hi Josh, thank´s for this tutorial and all articles in the web. Awesome effects, very professional.
Have a nice 2020 !!!!!!!!!!!
Guillermo
This tutorial is awesome!!
My only question is. Where do I insert that CSS code?
I know you said at the style sheet, but where excatly is that sheet?
Regards,
Daniel
Hey Daniel, here’s more info on where to put your custom CSS in Divi!