How to Customize the Top Header in Divi

by | Oct 24, 2017 | Divi Tutorial | 66 comments

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: