How to Customize the Top Header in Divi

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

Welcome to part 10 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.

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:

Elegant Themes Font Icon List

These are the previous tutorials I mentioned in the video that I recommend viewing before this if you haven’t already:

Custom Icons in the Divi Menu

Customizing the Divi Social Media Icons

Similar Tutorials:

Call To Action in Top Menu – Elegant Themes

Adding Fields and Icons – Quiroz.co

More top header tutorials on Divi Tuts Directory