How to Customize the Top Header in Divi
Want to level up your CSS game?
Use coupon code "CSS10" for 10% OFF my Divi/CSS Course!
This tutorial walks you through “How to Customize the Top Header in Divi.” By default, Divi gives us the ability to put a phone number, email and social media icons in the top header above the main menu. But wouldn’t it be nice to be able to put more links in there with custom icons and more? Welp, this tutorial walks you through how I do it! I use this method frequently on many sites I build so I’m excited to share this with you!
Here’s the CSS I used:
/*----------Customized Top Header----------*/
#top-header .et-social-icons {
display: inline-block;
float: right;
}
.top-phone {
width: 124px!important;
}
.top-phone a {
color: white!important;
font-size: 16px!important;
}
.top-phone:before {
font-family: 'ETmodules';
content: "\e090";
font-size: 16px;
float: left;
}
.top-quote {
width: 152px!important;
}
.top-quote a {
color: white!important;
font-size: 16px!important;
}
.top-quote:before {
font-family: 'ETmodules';
content: "\e07e";
font-size: 16px;
float: left;
}
.top-login {
width: 115px!important;
}
.top-login a {
color: white!important;
font-size: 16px!important;
}
.top-login:before {
font-family: 'ETmodules';
content: "\e070";
font-size: 16px;
float: left;
}
#top-header .et-social-icon a {
font-size: 14px;
background: white;
color: #3e007f;
padding: 5px;
border-radius: 25px;
margin-top: -3px;
height: 24px;
width: 24px;
}
#top-header .et-social-icons li {
margin-top: -2px;
margin-left: 5px;
}
#et-secondary-nav, #et-secondary-nav li {
display: inline-block;
margin-right: 15px;
}
@media only screen and (max-width: 980px) {
.top-phone {
width: 100%!important;
}
.top-quote {
width: 100%!important;
}
.top-login {
width: 100%!important;
}
.top-phone:before {
color: white;
margin-top: 10px;
margin-right: 12px;
}
.top-quote:before {
color: white;
margin-top: 10px;
margin-right: 12px;
}
.top-login:before {
color: white;
margin-top: 10px;
margin-right: 12px;
}
}
Links mentioned in video:
These are the previous tutorials I mentioned in the video that I recommend viewing before this if you haven’t already:
Similar Tutorials:
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.
Thanks for this! Very helpful. A great tutorial I’m sure I’ll refer to many times when people ask about this.
One little caveat: when overriding styles, best practice is to only include those styles that you changed. So in your very first example, the “display: inline-block;” shouldn’t be brought over. Just the float that was actually changed. So, it should be only: #top-header .et-social-icons { float: right; }
That makes things cleaner and if you’re editing stuff later, and won’t potentially override something else and create confusion.
Thanks, Tevya! Yeah you’re definitely right about that. I actually meant to delete that but just forgot while recording. Cheers!
Ah, cool. Seemed like something you’d know, just thought I’d point it out.
One other thing: if you set your border radius to 50% instead of a pixel amount, then it’ll always make for a circle as long as the element is square. So you could set that, then adjust height and width as needed, without worrying about if the border radius isn’t enough anymore.
Hey Tevya, yeah it’s funny, I actually used to do that but had some issues with versions of FireFox and (wouldn’t you know it) IE and percentages. So I just started doing pixels. But that was a while ago so I’m some updates have been made since then. Thanks!
Ahh another sweet tutorial Josh! You made it seems so easy 😉
haha thanks, Rambo! Glad it was of some help to ya.
Another way to do this is that we can paste the icon from fontawesome to navigation label like . We don’t need to write css for it. Just include fontawesome’s cdn link in in integration tab. Anyways, it’s a great tutorial. Thanks
Hey Qui, yep that’s another solid solution. I linked Geno’s tutorial in the post links which shows a similar method. There are certainly numerous ways to go about similar effects in Divi so whatever works best for you is the one you should use!
It would be awesome if you could include a transcript for those of us that process text much easier and more efficiently than video. I bet it would help with SEO too. 🙂
Either way, thanks for putting together the tutorials!
Hey Erik, yep I actually plan on going back through and doing that for each post so far. I just haven’t had the time to do so right now. Thanks for the reminder though and look for that in the near future!
Hi Josh, another great tutorial! What is your setup with the style sheet? Look like you have it in different window and it uploads instantly? I still use the WordPress editor to change the child theme CSS. Look like you have a sweet setup? Please share. Kind regards Nick
Thanks, Nick! I’m actually putting a tutorial together on that soon but in short, I connect through FTP right to my stylesheet then open it up in my text editor. I use TextMate2 as my text editor and use Transmit for Mac to connect through FTP. Let me know if that helps for now!
Here you go, Nick! https://joshhall.co/where-to-put-your-custom-css-in-divi/ As promised 🙂
Thanks so much – this was awesome 🙂
One question, I see you keep clicking on the “Purge SG Cache” link at the top of your page. Is that the SG Optimizer plugin for Siteground sites only?
Enquiring minds want to know 🙂
Thanks, Abe! Yep that’s a Siteground only feature. But there are several free cache plugins out there!
Hey, Josh!
Thanks for the tutorials. I have a question relating to the secondary menu on mobile and tablet layouts. How can I stop the secondary menu from being added to the primary menu when switching to tablet and mobile layouts? The primary and secondary menus merge in both tablet and mobile layouts. I found this CSS code – #mobile_menu li:not([id]) { display:none !important; } – on Divi Booster, which is supposed to hide the secondary menu items, but it hides both the primary and secondary menus from showing in mobile and tablet layouts. Any suggestions on how I can correct this? Cheers.
Shaun
Hey Shaun, not sure on that one man. If you’re not already a member, feel free to post this in my Divi Web Designers FB group and maybe someone in there has done something with this! https://www.facebook.com/groups/diviwebdesigners/
It’s a great tutorial. I am facing a problem in mobile view. I have drop-down menu and they are also showing icons in mobile view. Please provide help in this matter.
Hi Dolesh, if you want to disable the icons in mobile, you can just add display:none; in the media query then you’re all set!
Hello Jhosh I would like to know if it is possible to make the secondary menu visible on the cell phone because if I enter the cell phone I have to click on the menu so that the data placed on the secondary menu can be viewed recently.
I hope you help me please.
Thank you
Great question. Honestly I’m not sure of a way to display it on mobile. Maybe I’ll look into that and plan on doing a tutorial because it would be handy. I’ve created custom sections in the past that just activate on mobile but it’s separate from the top header. Actually, one round about way of going about that would be to create a top bar using Divi Bars then just activate it on mobile. Here’s a link if you’d want to try that out! https://divilife.com/product/divi-bars/
I am with Mariela on this question, I have tried this, but it did not work:
@media (max-width: 980px) {
div#et-secondary-menu, ul#et-secondary-nav {
display: block !important;
}
}
and.. I have researched this topic to exhaustion with no workable solution yet.
Hey Luke, this might be a good question for my Divi Web Designers group. If you’re not already a member, feel free to join and ask there! I bet someone has a solution….https://www.facebook.com/groups/diviwebdesigners/
Hey Josh, Can you obfuscate the email address in the top header using this approach? A search of the Divi support forum shows they have no interest in providing this option in the theme for users through the theme customisation feature. Cheers.
Hey Shaun, not sure what you mean?!?
Hi Josh,
Thanks for the tutorial. I just have a little question. When I take my style.css file from the child theme and edit it in text editor when I upload it back into the folder it changes nothing.
I tried to change the screenshot.jpg pic just to see would that work and it didn’t change either. I know this sounds like I am uploading it to the wrong place but I am uploading it back into where I downloaded it from .
Just wondering could you shine any light on this?
Thanks,
Michaela.
Hi Michaela, it might be a refreshing or caching issue. Generall, I just find the css file, then open it directly into my text editor, then save. I never download it then upload it. Try doing that! This tutorial might help: https://joshhall.co/where-to-put-your-custom-css-in-divi/
Hi,
Great tutorial, I was just trying to get a hover color on my social media icons and I cannot get it to work. How can I do that?
Please see my footer social media icon tutorial that that should help! Otherwise you can target the icon link and change the color by adding a :hover state!
Useful Tutorial Josh. Thank you
Thanks! Glad it helped.
Hi Josh – thanks for the great tutorials! This is a bit off topic but closely related.
Hi, I’m just starting on a new website for an industrial machinery company. I want to do something similar to the website https://www.scottcompanies.com/ with a large image in the background and the menu and other floating modules on top of the image. What would be the best way forward with Divi to help accomplish this?
Hi Lucas, you can just reduce the opacity in the Theme Customer Menu settings and make it transparent. That’ll automatically move the image behind the menu then you’re all set!
Hi Josh,
I have a question. Don’t think i’m stupid and i don’t know anything about wp, as i’m new. Can you tell me where should i need to paste this css, or how can create or where should i paste css file.
Hey Rakesh, no worries. We all start somewhere 🙂 This tutorial will help! https://joshhall.co/where-to-put-your-custom-css-in-divi/
Very cool tutorial…thx
I’m a newby to Divi and really like it.
btw; how do you add a third social media icon? (ie; Instagram)
Thanks Steve. There are several tutorials out there on this but you can refer to that here: https://www.elegantthemes.com/blog/divi-resources/how-to-add-more-social-media-icons-divi
I’d also recommend googling that for some alternative options.
Great tutorial, but I have a similar question that I’ve not been able to find an answer to. How do you add an event code (from a Facebook pixel) to just one page on a Divi website. I want to track visits to a thank you page, indicating that people have registered for my lead magnet.
Hey Laurie, unfortunately this question isn’t directly related to my tutorial. I’d recommend reaching out to my FB group where I believe this has been answered before! https://www.facebook.com/groups/diviwebdesigners/
Hi Josh,
Thank you so much, another great tutorial from you. Just a quick question, regarding the styles sheet, does it need to go into the root of the child themes folder to avoid losing changes or shall I add the code to the original Divi styles sheet?
Thank you.
I think as long as the path is correct to the child theme I’m not sure it matters exactly where it goes. But it’s probably best to keep the stylesheet in the same path in the Child theme that Divi has it at if that makes sense!
Josh, thanks for the useful tips.
Do you know a way of placing an icon (like a phone icon) in the mobile header?
So I’d like to see a hamburger menu on one side and a phone icon with a link to call and maybe social icons as well on the other side.
Here is an example of a mobile header I am looking to create… https://www.baysidedentalspa.com/
Thanks
Ah it would take some custom CSS or jquery but it is definitely possible. I’ve done some similar things with sites in the past. I’ll dig up that code and plan to create a couple tutorials on that!
Hi Josh,
great tutorial. However, what I am doing wrong? To put the social media icons to the right works on Chrome but not on Safari. How can that be?
Thanks!
mmm it should work on both, Jan. May take some CSS trouble shooting as there can be differences between browsers.
Josh I have done everything like you have unfortunately I can’t get the CSS to take. I have tried to post the css directly onto the css and in the custom divi css, and neither work. Any suggestions? Is it possible some-other css is overriding the css we are trying to put it?
Thanks,
Shawn Larson
Hey Shawn, typically it’s a cache or browser refresh issue. Can you clear all cache options, refresh and make sure there’s no firewall cache or anything else saving the old styles? Can’t imagine anything’s overriding after all the options you tried.
Do you have any tutorials that explain how to achieve the layouts of the other clients you showed (Retina Group, SafeX) where the logo spans the height of the entire header and there are 2 stacked areas on the right hand side?
Awesome site and resource!!
mmm that I don’t. For custom headers like that, I’d recommend using the mhmm menu plugin.
In Divi How do I move the primary menu below my header image?
Would some some Jquery or PHP unfortunately. Or the easy way for now is to use the mhmm plugin and I know they have that as a prebuilt option.
Usual divi styles requiring !important EVERYWHERE!!!
Can’t argue with ya there 🙂 It can be frustrating at times. And when other plugins are involved it gets a little tricky depending on the element. That’s with any theme though.
Great tutorial, but I do not have the “CSS Classes optional” field in my menu > custom links settings. Is this a separate plugin I need to add, or something I need to enable?
Hey Stacie you just need to enable that under Screen Options!
Hi Josh,
You are the best go-to person for Divi. All of your instructions are clear and concise.
I went ahead and purchased Transmit 5. My info from the server isn’t showing. I know I did everything correctly
Can you recommend where I can visit to get help figuring this out. I have been searching for an answer for over an hour.
I know that this isn’t really a Divi question but any help you could offer would be appreciated.
I am determined to move to the next level of Divi learning.
Thanks Josh!
Hey Diana, thank you!
Sometimes the server info can be different depending on what host you use. I.e. sometimes it works with http://ftp.yourdomainname.com. Other times it only works with the IP address in the field. My guess would be to try that first or contact your host to see if they know of a for sure way to get through FTP. I do cover that more in my CSS Course a little but worth a try for now!
Thanks for the quick reply Josh!
I will give that a try.
Keep those videos coming.
Actually just realised the code above has some weird code,
.top-quote:before {
font-family: ‘ETmodules’;
content: "\e07e";
font-size: 16px;
float: left;
}
might need to check that dude 🙂
A recent update must’ve made that code go a little wonky. It’s fixed now if you want to have another try.
Hey Josh,
I love your videos. I really like the way you explain things. I just tried to use this CSS on the secondary header and when I put .top-phone in the Theme Customizer, it’s red and the phone icon is not appearing. I’ve added the css class to the phone number. No typos. Did something change when Divi introduced Theme Builder?
What I want to do is build a header like the standard header, but put in a sentence the client wants. I tried to build it in Theme Builder, but don’t like that I can’t make the whole header shrink up on scroll.
Any suggestions would be welcome. Thanks in advance.
Hey Michele, this tutorial is not using the Theme Builder so the code is different for that. Same methods apply, you’ll probably just need to identify the right ID or Class for those elements to appear correctly. Here’s my tutorial on using Inspect Element to find the right ID or Class. Hope that helps!
Hi! It’s possible to see scondary header instead primary slidein header?
Thanks!
Some of the elements are different but yeah you can customize the main header similarly with the #main-header ID! I actually show how to do that in detail in my CSS Course so if interested at any point, let me know!
Thank you for this, you are very didactic, you know how to teach!