Have you ever wanted to add more info to the top header instead of just a phone # and email address? How about a physical street address or new social icons?

Well it is easier than you think using the secondary menu and Font Awesome.

See Demo

Getting Started With Font Awesome

We are going to be using Font Awesome in this tutorial. Font Awesome allows you to integrate Font Icons very quickly and easily. Click here to read more about Font Awesome.

1. To get started you will need to download the entire font awesome directory to your website. You can download it here at Font Awesome.

2.  Once you had ftp’s the library into your website you will need to go to Divi > Theme Options > Integration and adding the following code to the head of the blog.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

008

3. The scroll down to the bottom of the page and Save Changes.

 

Building the Secondary Menu

So to get things started a I created a basic home page with a standard primary menu

1. As you can see here I have not done any other customization to the header area except change some colors and added some basic content.

001

2. Now the first thing you are going to do is create a secondary menu. Go to Appearance > Menus, Select “create new menu”, name it Secondary and select “Save Menu”.

002

3. Enable the Link Target and CSS options by selecting the Screen Options Tab on the upper left hand corner of the page.

004

4. Then tick the Link Target and CSS boxes.

005

4. Next you are going to add each menu item. You have several ways to add menu items. On the left you have options to add Pages, Posts, Custom Links and Categories. In today’s tutorial we are going to be adding custom links.

003

4. So for example if you wanted to add an address that links to Google Maps. You would add the url for Google maps and then the actual address in the Link Text.

006

5. If you want to add an icon in front of it, like a map marker for instance, then you can include the Font Awesome code in front of it.

007

6.  Now to enable your new Secondary Menu in the Top Header, scroll to the bottom and tick the Secondary Menu option.

009

7. And now your Secondary Menu is enabled in the Top Header

010

8. Now you can go through and add the other items. Here are some Link Titles to get you started. Just add your own url.

<i class="fa fa-mobile"></i> 888-888-8888
<i class="fa fa-calendar-check-o"></i> Appointment
<i class="fa fa-download"></i> Download Forms
<i class="fa fa-cloud-download"></i> Resources
<i class="fa fa-map-marker"></i> 1188 Some Road, Some City CA 99999

TIP # 1: To make the telephone number launch a call in mobile, use this format as the url: tel:+8888888888

011

TIP # 2: To make the links open in new tabs, select the “open in new tab” box

012

9. So after adding a few more your menu now looks something like this

013

Adding Social Icons

10. Now to add social icons, we follow the same steps but the Link Title will only be the Font Icon. No text.

Also add the following CSS Class: sm  I will explain more later.

014

11. Go ahead and add a few more. Here are some common Font Awesome icons. More can be found here.

<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-square"></i>


<i class="fa fa-twitter"></i>
<i class="fa fa-twitter-square"></i>


<i class="fa fa-pinterest-p"></i>
<i class="fa fa-pinterest-square"></i>


<i class="fa fa-google-plus"></i>
<i class="fa fa-google-plus-square"></i>


<i class="fa fa-linkedin"></i>
<i class="fa fa-linkedin-square"></i>


<i class="fa fa-yelp"></i>
<i class="fa fa-tripadvisor"></i>

12. And now you have something like this.

015

But lets say you want to add some color and make those SM icons stand out a bit more.

And Now The Magic of CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

13. Add this CSS.

/*------------------------------------------------*/
/*----------[TOP HEADER ALTERNATIVES]-------------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/

/* icon colors */
i.fa.fa-facebook {color: #265999; font-size:20px!important;}
i.fa.fa-twitter {color: #00ace2; font-size:20px!important;}
i.fa.fa-pinterest-p {color: #ef0021; font-size:20px!important;}
i.fa.fa-google-plus {color: #df4b38; font-size:20px!important;}
i.fa.fa-linkedin {color: #117bb8; font-size:20px!important;}
i.fa.fa-yelp {color: #c42026; font-size:20px!important;}
i.fa.fa-tripadvisor {color: #71a55d; font-size:20px!important;}


/* mobile menu adjustments */
.et_mobile_menu i.fa {display: none;}
.et_mobile_menu .sm {display: inline-table; padding-left: 26px;}
.et_mobile_menu .sm .fa {display: block!important;}

14. And this should be the result.

019

Note. My CSS above includes adjustments to the mobile menu. This is what the mobile menu looked like before and after.

017        018

There is so much more you can do with this and I hope it gets your creative juices flowing. Check out the live Demo and if you use this one one of your projects please share a link below 🙂

See Demo


Well that’s all for now. I hope you find this article useful.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!