How to Customize the Top Header in Divi

what's up everybody its Josh here in this tutorial I'm gonna show you guys how to customize the top header in Divi now by default Divi gives us the option to have a phone number in an email in the top header along with social media icons all of which are put in place in the theme customizer settings now what I'm going to show you here is the method I use to put different call to actions and different menu items in the top header because often clients will ask me to put maybe an address up there or maybe like a request a quote button or something like that so let me show you some examples of how I've used this here's a recent site I did that has not only the phone number but their text number their address along with their social media icons now this site is a little bit more busy than I would prefer for the top header but the client loves it so all as well here's another example where this client not only has their main call to action menu links but they have their phone number that I customize their WooCommerce car items and their social media icons here and then finally this client wanted not only their primary number but their secondary number along with a link to their patient portal and you can see that this icon is customized so I'm gonna show you guys how to do all of this and more in this tutorial so let's go ahead and dive right in the first thing that I'm gonna do is I'm actually gonna nix this phone number and email because these are set up here in the theme customizer and if you're new to Divi and you're not sure where those are let me show you where those arcs were actually going to delete them for the sake of this tutorial you're gonna log into your theme customizer and then you're gonna go into header and navigation and header elements and that's where you're gonna find this phone number in this email the reason I'm not gonna worry about these is because though they can be very useful if you just have a phone number an email we want to put some different links in there and we can't really I mean you can adjust these but it can be a very very much a pain so what I'm going to show you how to do is to utilize the secondary menu which is located in the top header now you'll notice when I took the email and the phone number out the social media icons automatically floated over to the right in the top header which I like I think that looks good your eye reads from left to right so generally I like to keep my top header things aligned to the right so now that we've got that set we're gonna go ahead and go into our dashboard and we're gonna go to our menu so we're gonna go appearance menus and by default when you go to your menu you're gonna see your primary navigation but if you want to do a menu in the top header which is what we're gonna customize Divi gives us this option right here for top header also known as secondary menu so we're gonna go ahead and select that and I've already got this set as our secondary menu and what we're gonna do is we're gonna play around with some custom links since it's not actually going to a page we're just gonna give this the pound sign because it's not actually linking to anything but we're gonna give this let's put our phone number in here and we're just gonna use this fake phone number here so we've got that all set up let's do another one let's do request a quote request a quote and then finally let's do one more that you know I like that in the retina group site let's do portal login there we go okay so let's go ahead and save this menu and we're gonna go ahead and go back out to the site alright and automatically you can see that the secondary menu is in there with those three options and it moved the social media icons over to the left now what I want to do is I actually want to put these social media icons back over to the right of these so I'm gonna right click and undo inspect element if you've been following my tutorials at all recently you know this is how I literally adjust all of my websites it's the same trick I use over and over so we're going to go ahead and find where these top menu social icons are located and right here we can see this has a class here we go right here top header social icons we want to float this to the right there we go so all I had to do was do float right so what I'm gonna do is I'm gonna take this code and I'm going to bounce over to my style sheet okay and I'm gonna go ahead and just drop that code right in there and now we can really start having some fun with these icons again what we're gonna do is we're gonna give these kind of like these menu icons and then we're also gonna just adjust these a little bit to make them look seamless with this top header now we're gonna use the exact a method that I use on the actual menu here and that is using a before element to place these custom icons so I'm gonna go through some of that pretty swiftly if you did not get a chance to see that previous icon menu tutorial please go back to my tutorial and it's gonna walk you through in more detail because we're gonna go ahead and dive right into this so first thing I'm gonna do is I'm gonna start with a phone number I'm gonna go back into my menu and I'm gonna go into custom link I'm gonna dive into this further now what's cool about this is just like any menu in WordPress you have this option for screen options and this is gonna give us the ability to put extra CSS classes in there you could put a link target if you want that to go to a different window a different tab so we're gonna have both of those selected we're gonna go ahead and close that and what I'm gonna do is I'm gonna give this a class I'm gonna give this a class of I'm just gonna call this top phone and what we're gonna do is we're gonna use this class to style in CSS we're gonna style that and give it an icon and give it some cool effects so we're gonna go ahead and use that and we're gonna save menu we're gonna go ahead and bounce back over to my stylesheet and I've got some code saved that we're gonna drop in here okay so I just pasted the settings that I have right now and it'll walk you through for this top phone class so first things first let's go ahead and save this and let's go out here refresh I'm gonna walk you through each piece of this code to show you how this works so let's go ahead and refresh okay so now that it's pulling up that icon let me show you how this works and we'll go ahead and we'll do style style this a little bit more but let me show you what this how this works so this has three elements to it the first is the top phone class which is kind of the wrapper of the actual elements the a means that it is a link which we're gonna style the actual text that is a link and then the before element just like my previous tutorial with the menu icons is what's pulling that little phone number we're telling this that it's coming from the et font family and this content right here is the actual phone icon and we can adjust the sizing and the spacing all right here so the first thing that we're going to look at is I can tell there's some spacing right here so I want to use inspect element and right now I had if you look here I can go in to my class and I can see okay top phone that class that I put in there is right there so let's scroll down and there we go I can see that the width is at 148 let's go ahead and bring this down a little bit now you'll see if I get it too close it's gonna jump so watch this if I go too close it's gonna jump like that so we do not want that so you have to play around a little bit but I'm gonna go ahead and set this that may be right there at 124 so I can go back into my stylesheet here I can go to 124 that looks good and bam we're done with one of the elements now let's go ahead and do request a quote I'm gonna go back into my menu options I'm gonna go to request a quote and this one I'm gonna call top let's call it top quote so we're gonna go ahead and save that now what I'm going to do is I'm gonna duplicate all of these settings and I'm just gonna replace the phone with quote so let's go ahead and copy that so top quote quote now that if we save this and we go back out to the site I can go ahead and refresh and we should see there we go so you can see the phone icon you can see it's a little jumbled there because again since this is a different width with with the text in there we need to actually just adjust this a little more so I'm gonna go back up to the class where I can see top quote and we're gonna want to jump this up until it evens out so let's go up to maybe 150 - that looks good so I'm gonna go into top quote and adjust the width of that wrapper - 150 - and save and now finally yep you guessed it we need to change that phone icon so let's go ahead and refresh here okay so again request a quote we don't want that phone icon we want a different icon so I'm gonna go into my elegant themes icon list which again I'll have linked in the show notes for you and let's say we want to put maybe like a mouse in here instead of the phone number so just like the previous tutorial again please watch that if you haven't already as the the menu icon tutorial but we want to take this again we want to use what's after the X and before this little semicolon so we want to do e o7 e for that mouse so we're gonna go into the content and we want to do Oh 7e we're going to save that and now if I go back to my site we're gonna refresh and we should see that mouse for the request of quilt and there we go easy-peasy so we've got two out of three let's go ahead and do that final one the portal login so we're gonna go back into our menu same steps as before we're gonna go top I'm gonna call this just top login and you'll notice I'm not using the dot here because it already knows it's a class we want to save the dot for the actual stylesheet so we're gonna copy this little segment of code again let me grab all of it and we're gonna go top login top login top login save that now I'll tell you what let's go ahead and find a nice login icon in our list I kind of like the retina group login because it had that like digital cloud there we go Yeah right here so let's do this so this one's gonna be e o7o or 0 you know make sure it's zero and not oh we're just gonna change that to top login and now would that saved back out to our site and refresh boom there we go so you can see right there we just need to adjust the width here so just like before we're gonna inspect element I'm gonna find that class of top login and you can see right here which is pretty cool in the secondary menu as a whole you can see the class I put in in each one of these and that's where we can have some fun and style this even more so top login we're gonna drop this down we're gonna drop this down to ya 118 looks good cuz again if I go too far it's gonna bust it so let's I tell you what let's actually go like 115 that looks pretty cool 115 and save okay so that looks really good you can see just a few you know a few menu items we put in there with the same method that I showed you previously in the previous tutorial on how to add those icons we can really spice up the menus and that's how I did all of my previous sites now lastly let me show you how we're gonna tweak these social media icons I'm actually going to do this the exact same way as the previous tutorial where I showed you how to customize the footer icons which I'll make sure I link to well but in case you didn't see that in case you want to kind of play around with some of these what we can do is again we're using inspect element we're going to go ahead and look at the top header icons and we can see in here that we're gonna mess with the actual link itself we don't want to mess with the entire block we just want to mess with the the actual link so let me try giving this a background color let's say white and I tell you what let's do the actual color itself for right now we'll give it purple but I want to match that top purple so that looks pretty good right there and that's cool let's go ahead and give this some padding so this is going to give some padding between the edge of the the background color and the actual icon let's do like five pixels see how it looks pretty cool and then finally let's do one of my very favorite CSS tricks and that's to give us a border radius which is gonna make this a nice circle let's try 25 I always do 25 and it seems to work pretty well so that looks pretty good and then I tell you what let's go ahead let's adjust let's let's give this an actual height because you can see it's holding right on the bottom there now you could go in and you could adjust the padding and the margins on the actual top header but that can be a little bit tricky so I'm gonna go ahead and give these an actual height of say 20 let's do a little more you know I might have to adjust those either way so let's not even worry about that height let's go ahead and take this code now that we've got it and again these social media icons are only going to be adjusted on the top header because if you just do this without that top header tag it's gonna adjust all the social media icons around the site so we're gonna go ahead and drop that in there we're gonna mix that height that looks pretty good now I tell you what let's try actually doing a negative margin let's do a negative margin top and let's try 10 pixels Oh see that looks pretty good let's go ahead and bring that down a little bit though that's what about right there that actually looks pretty darn clear and pretty flush the last thing we might try is to make sure these are perfect circles so let me add back in that height but let's try 25 pixels and let's try a width of twenty five pixels as well okay so we know that is a perfect circle and that looks pretty good except we can probably bring these down just a little bit maybe 22 it looks pretty good 22 there we go yeah that looks that looks pretty darn good there and then you can see they're just not perfectly centered so I might just try adjusting the padding maybe two five looks good let's go ahead and adjust the height and the width again to see if we can even these out to make these look real nice yeah that looks pretty good right there so we'll do 24 okay so now I'm gonna take this code and we're gonna go back into our style sheet we're gonna drop it in there and our padding was at five okay so now let's go ahead and save this and refresh I tell you well you know what one last thing we want to do is I feel like these look a little far apart so I'm gonna go back in here and I can see that each one of these social media icons has a margin length of 12 we're just gonna bring this down yeah five looks pretty good so I'm gonna go ahead and copy this little section top header social media icons lists which are the icons themselves and we don't want to put that in there we want to put that below it okay now let's go ahead and save that and refresh and that is looking pretty darn good the only last thing that I might do is I'd like to go in here and just give this a little room in between the two so what we're gonna do is we're gonna go into you can see this has an ID of secondary nav and all we're gonna do is just give this a margin right because we want to just give us some space so we're gonna do margin right and let's say maybe 15 pixels boom that looks perfect so you can see all I had to do is just add a little margin to the right if I were to take this down it's gonna overlap um I can just bump that up and that looks really good just kind of separates the two a little bit so I'm gonna copy this section of code here and we're gonna drop this in our style sheet and guys we are done we just just a few lines of CSS and using the secondary menu we really took this whole top header to a whole nother level now there's one last thing we need to do because I know what you're asking what mobile yep you guessed it we need to just make a couple of tweaks on mobile so I'm gonna go ahead and right click inspect element and you can see automatically I've got my menu popped open there yep wouldn't you know it these look a little bit jumbly on mobile now you could do a media query and you could just tell these the the secondary nav to be display:none you could tell them to be off on mobile but I kind of like having these in the menu as well so I'm gonna inspect element and I'm gonna look at the actual class itself and I can see that right now it has a width of a hundred and twenty four what I'm gonna do is on mobile I'm gonna give this a hundred percent we're gonna do that and that's gonna make it go the width of the actual menu so let's go into our stylesheet and I'm gonna add this little section right here that tells us that once it gets to 980 which is the mobile tablet view we're gonna go ahead and we're gonna make some adjustments here now off right off the bat I know that we want to do top phone Top quote and top login at a hundred percent which is going to make those look better and I tell you what let's go ahead and zoom in a little bit so you can see this better so the next thing we need to do is we just need to change the icon so we're going to go again I can use inspect element I can just hover over before so that before state looks okay but we need to make sure that color for whatever reason that color changed on mobile so we're gonna do color white we're gonna make sure that all of those are white we're also gonna adjust the margin the margin looks like it's bumped up a little bit so we're gonna do margin top let's give this a margin top of 10 pixels that looks good and then finally we want this to look like the regular menu and we want to adjust the margin right just to give that some space and let's try 10 pixels there as well and boom there we go looks pretty good we might try 12 that looks pretty good so we're gonna go ahead and take these settings copy them over here as well and you can you can organize this however you want since this element already knows all of these settings we're actually gonna just take this out and we're just gonna put what it does not know the new settings that we add for mobile so we're gonna duplicate this twice and yep you guessed it gonna put quote and login now we're gonna save that and we're gonna go out to our site we're gonna refresh and fingers crossed when we look into mobile this should look good and it looks the same here because again with this media query we told these settings just two chains once it hits night 80 what I'm gonna go ahead and inspect element and here we go go ahead and scroll down and boom looks awesome looks great looks really really cool and it's pretty pretty much seamless with the original menu so guys again that's how you customize your top header and Divi let me know if you have any questions otherwise have a blast adding some new elements here making your clients happy and having some fun with the top header and Divi thanks guys [Music]

Channel: Josh Hall

Views: 142,736

Keywords: Divi, Josh Hall, Web Design

Id: h5dcwIk5Za0

Length: 18min 42sec (1122 seconds)

Published: Tue Oct 24 2017