How to Create an Overlapping Logo in Divi

hey guys it's Josh here in this tutorial I'm gonna show you how to create an overlapping logo that overlaps the top menu and then also shrinks down when you have a fixed navigation now there have been a couple other tutorials around the community that I'll make sure to link to that show you how to do an overlapping logo in the menu but I haven't seen anything that shows you how to overlap the top menu and let me show you a couple examples of where I've used this trick here's a client that has a logo that is very text driven but it has this icon that's you know sitting pretty far above the text so in this case we originally had it in the menu bar but this B words looked really small when it was shrunken in there so I just expanded it and bumped it over the top menu to give this look here's another example where I had a client that added this little anniversary tag and originally this was smaller but again this text looked really small and it was hard to read so I just expanded it and put it above the top menu and then I'm also gonna show you in this case how to when you scroll down you'll notice the logo is going to zip down and nestled nicely into the menu on scroll so that's a couple different looks in a couple of reasons why you would might want to use this generally this works good for like vertical logos but in this case even a horizontal logo that has kind of a funky shape to it this can be really really useful so let's go ahead and dive right in the first thing that we need to do is you'll notice when you have a top menu generally your phone number and your email a lot of elements are going to be aligned on the left so the first thing that we need to do is move those because if we put our logo over them it's gonna conflict so have you followed any my recent tutorials you know that I love Chrome and inspect element so we're gonna right-click and inspect this and you'll notice that the top menu has an ID or at least these elements have an ID of et info so let's go ahead and look into the code and you'll see that these have a float of left let's go ahead and make these float to the right and then BOOM just with a little change in the et info ID right there that's gonna float those to the right so let's go ahead and save this code and we're gonna drop this into our stylesheet I have a little section that is telling me this is where all the custom code is going to go for overlapping logo that shrinks on scroll so now that that's a let's go ahead and refresh and all that stuff should be to the right okay so now we can see the phone number email is floating to the right now we can start having some fun with the logo so I'm gonna go into my inspect element toolbar here I'm gonna click the Select tool and I'm just gonna look at the logo itself so you'll notice that in Divi the logo has an ID of just plain old logo here's where we're gonna have some fun you'll notice that this has a max height of 54 percent now you can adjust this in your logo settings in the theme customizer but I prefer to use CSS when possible and you're gonna have to to achieve this look so what I'm gonna do is I'm just gonna cancel that out and you'll notice right when I do that bumps the logo up to the original size so you can see the logo is much bigger than that so let's go ahead and dive in here and let's have some fun I'm gonna create a new max height but I'm gonna give this a high theb let's start out with a hundred pixels instead of percent we're gonna go ahead and try actual Heights with pixels so you can see that looks pretty good right there but it's it's overlapping so now what we want to try to do is have some fun with my very favorite CSS snippet of margins and in this case we're gonna do margin top and let's give this a negative margin of say 20 let's see how that looks and there we go you can see and I can play around us a little more let's bump this up to say so well you know what let's say 30 yeah there we go so with a max height of 100 pixels and a margin top of negative 30 you can see we have we've achieved that look and it looks awesome so I'm gonna go ahead and take this whole snippet of code I'm gonna go into my stylesheet drop logo we're just gonna delete all this because this is the code that's just you know laying on top of that that divot II aren't Devi already knows about and it's that easy guys now then in this case this is showing a design that does not have fixed navigation so let let me show you something here that's been really interesting that I had to find out the hard way we're gonna go into my theme options and we're gonna give this a fixed navigation so we're gonna go here to fix navigation bar we're going to enable that and we're going to go ahead and Save Changes now when we go back out to the site let me show you what we see here well the logo is being covered up by the top header it's so weird it it works fine if you don't have fixed navigation but if you do have fixed navigation where we scrolled here that logos getting covered up but but I'm gonna show you the solution all we have to do as we dive back into inspect element is we need to have some fun with what we call the Z index which is the positioning of an element so we can see that this top header here actually let me let me grow into right here with the ID so top header this fixed nav you can see it's a position of fixed I haven't seen where you can find this code but we can override it by giving this AZ index of nine nine nine oh you can see right there I can just give it as an Z index of nine but I found that you don't want to you know I think the best thing to do is do 9 9 9 8 I've found this out the hard way because other elements are gonna overlap that if you don't have this exact code so there we go all you have to do is do Z index 9 9 9 8 and I'm gonna throw a important right there just to make sure this knows about that so first things first let's go ahead and copy that segment of code and we're gonna drop in here and this is gonna tell the logo that once we zip down its gonna keep it above it now the last thing that we need to look at here is typically when you scroll down your look your menu is gonna drop a little bit now you can adjust the height to make sure that that doesn't you know scroll down at all you could go into the theme customizer and you can adjust those settings but in this case you know I like that and I find that a lot of my clients will say oh that's a cool effect how the logo kind of gets smaller when you scroll down so we're going to use that but in this case I want to do the same look that I showed you here where the logo Scrolls in like that and I'm using it in a site here as well where they have a very vertical logo this is actually where I came up with this trick is because they actually requested that that logo sit above the menu and then it drops in the menu so on this one when you scroll down zip it just kind of zips in there so what we're gonna do is you'll notice when we scroll down here again the logo doesn't really move but what we want to do is we want inspect this and I just want to kind of play around with where I want this to go so I'm gonna give this a max height of even smaller let's do let's say 60 looks pretty good and then for the margin top we actually want to lower that we want to bring that back down to it'd be like five actually you know what we can probably bring that to zero there we go so we're gonna do a max height of sixty and a margin top of zero once we scroll down so what we need to do is I'm gonna go ahead and bounce over to my style sheet and I have some code saved I'm gonna show you how this looks okay so I just pasted it in this little snippet of code this is again using what we just came up with for the logo with a max height of 60 and a margin top of zero but you'll notice I added this little tag in front of it that says it's a class of et fixed header this this is gonna make it so it does not conflict with the logo settings that we have here because if I just change the logo settings here you'll notice we scroll up it's gonna have that same look so all you have to do is paste that in there and save that and I tell you what we're gonna do just for the sake of keeping all this code nice and clean we're gonna put the logo stuff together so logos here the fixed logo settings are there and now once we save that and we clear our cache we should see a nice overlapping logo and when we zip down there we go it zips right into place so it's that easy guys just really these few lines of CSS and this is gonna be available to you so you can take this and tweak it on your own again I found this very useful for logos that are really vertical like this one here but there's one last thing I want to show you let's say you want to overlap the bottom let me show you a site here okay so on this site here you'll notice when I scroll down the logo just overlaps the menu just a little bit which gives it a kind of you know kind of a cool feel so here's that here's what we want to do here we're gonna go ahead and reinstall it say you all let's just bump this up to like 150 there we go so it's expanding over that now of course it's white so you're not gonna see that so let me go ahead and go into the code here we'll give this 150 let me go ahead and add an image which I just so happen to have an image ready for us let's go ahead and create a new section and you can do this with the visual Builder as well which is for the sake of this but you know what I tell you what let's just add this image right into the section here I'm gonna go to the background I'm gonna give this a background image of these beautiful boats on a lovely ocean or lake so we're gonna go ahead and update that now let's out here we're going to view the page and there we go you can see the logo expands over the top and the actual section below it again you're not going to use this in too many cases but in this site right here it worked out very well cuz the client had a very vertical logo and you'll notice when we go back over to our site we're gonna scroll down and boom that sits nicely snuggled into the actual menu itself now you're probably asking yourself okay this is great but what's this gonna look like on mobile a lot of times when you do custom CSS changes like this it can really throw things out of whack for tablet and mobile view so no worries I'm gonna show you exactly what we're gonna do to make sure this looks good on phones first things first I'm gonna go ahead and dive back in this stylesheet I'm gonna make this a hundred pixels that way the logo is not over expanding on this because again I just wanted to show you just in case you had a really vertical logo and you wanted to try that out so again it looks really nice now let's go ahead and right click inspect element and let's take a look at what this looks like on mobile I'm gonna click the little toggle view for the device and there we go so it doesn't look terrible but the logo is overlapping let me go ahead and zoom in for us a little bit here so the logo is overlapping the phone number there for a little bit so all we have to do is I'm gonna look into the logo settings here and I'm looking I'm just gonna go ahead and play around with this I'm gonna adjust the the max width height and I'm gonna bring this down to say let's say 85 and then I'm just gonna adjust the top a little bit instead of negative 30 let's make it like negative 20 don't look too bad and actually if I didn't want that overlapping at all on mobile I'd probably make that zero and I'd give it a max height of ah we can adjust this a little bit we could say you know maybe like 55 or something like that maybe a little more let's bump this stuff let's bump this up looks pretty good right there yeah let's just go 70 make it an even number so there we go so now that I know what I want that logo to look like on mobile I'm gonna go into my stylesheet I'm gonna go ahead and give this a scary media query which is gonna tell this logo to look like that size at 479 and I tell you what we actually probably want to do this for tablet views as well so we actually want to do this at 980 so let's go ahead but 9 80 in there and then so basically what we're telling this is that we want that logo to drop to this size at 980 so it's gonna look good on pixels or it's gonna look good on tablets and on phones so now that we've done that let's go and I tell you what one more thing we'll do maybe this top header info here I think maybe wicked sinner that just because it's float a line right right now so let's take a peek at that let's look at ET info and it's floating right let's do float none there we go float none makes that perfectly centered and that looks pretty darn good on mobile so now we're gonna head and take this little chunk of code ET info float:none we're gonna put this right here so this wool looks centered in the tablet and mobile view and now let's go ahead and take a peek at this so let's go ahead and refresh and when i zoom my browser in this should look good on tablet view there we go so it's actually floating ere we go so once we hit 980 it'll go to the center and then on mobile there we go looks beautiful and again if you wanted to test this out a little further you can just right click inspect element and click in here the responsive views and you can see this to make sure it looks good so we can always test it out there as well so I hope this has helped guys if you have any questions let me know otherwise enjoy being able to overlap your logo on the top menu and really playing around with it and having some fun and again you know that you can just take this code and you can adjust the max height and the top margins to your liking if you don't have the fixed nav again you don't have to worry about the Z index or anything like that so depending on how you have your site set up you'll be able to follow this tutorial and take this code and make it your own so let me know if you guys have any questions otherwise have a good time overlapping your logo and having some fun thanks guys [Music]

Channel: Josh Hall

Views: 38,389

Keywords: Divi, Josh Hall, Web Design, Elegant Themes

Id: M5YsNg0BUTU

Length: 12min 56sec (776 seconds)

Published: Mon Oct 09 2017