How would you like to make cool Social Media Icons on the top of your page like this without any plugins ?

 

00001

 

Here is a cool way to add your own cool social media icons or any type of icon in the top header of your Divi website using Font Awesome, CSS and a little Divi Wizardry.

Font Awesome

The first thing you will need to do is add the code needed to start using font awesome icons on your website.

1. Go to your Divi Theme Options and once in the epanel select Integration

001

 

2. Paste the following code into the first section that says “Add code to the < head > of your blog”

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

002

 

Now you are ready to start using Font Awesome on your website.

 

Setting Up The Custom Menu

 

1. Go to Appearance>Menu and then create a new menu called Secondary Menu. Be sure to tick the option in the Menu Setting to make it your official Secondary Menu.

003

 

2. In the upper right hand corner of the screen is a tab that says “Screen Options” Click on that to bring down the options and tick the CSS Classes box

004

 

3. Under the “Custom Links” option is where we will begin adding our links. Select the option and add your url. In this case it’s my Facebook page url

005

 

4. Next you will need to grab the code for your font icon. Head on over to Font Awesome to see their library of 585 icons and growing. Once you find the icon you want, select it and it will take you to the page where you can copy and paste the code.

006

 

Here are some of the common links for quick reference.

<i class="fa fa-home"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest-p"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-yelp"></i>
<i class="fa fa-tripadvisor"></i>
<i class="fa fa-shopping-cart"></i>

 

5. Now that have the codes you want, you will add it to the “Link Text” in the Custom Link and then select add to menu. Repeat these steps for all the links you want to have in your top header using an icon only.

007

 

6. Once you have all the menu items added, you will have to go through each one and add a CSS Class. For example facebook-menu, twitter-menu, pinterest-menu, etc…

008

 

Now we just need to make sure the top header is enabled.

 

Enable Top Header In Theme Customizer

 

1. Go to Divi>Theme Customizer

009

 

2. Go to Menus>Secondary Menu>Menu Locations and Make Sure the Secondary Header is enabled (ticked). Then click Save & Publish and go back to main menu in Customizer.

010

 

3. Next go to Header & Navigation>Secondary Menu Bar and change the background color to white.  Click Save & Publish

011

 

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)

1. Add this CSS.



/*------------------------------------------------*/
/*---[Square Icon Menu Links - By Geno Quiroz]----*/
/*-----------------[Quiroz.Co]--------------------*/
/*------------------------------------------------*/



/* readjust padding */
	#top-header .container {padding-top: 0px;}
	#et-secondary-menu {height: 50px;}
	#et-secondary-menu > ul > li a { padding-bottom: 0px;}
	#et-secondary-nav .menu-item.menu-item-type-custom {padding:15px; width:50px; margin-right: 0px;}
	#et-secondary-nav li {display: table-cell;}
	#et-info {padding-top: 23px;}


/* font icon size and color */
	i.fa {font-size: 20px; color:#fff;}


/* colors */
	li.home-menu {background-color:#23282d;}
	li.home-menu:hover {background-color:#616f7c;}

	li.facebook-menu {background-color:#43609c;}
	li.facebook-menu:hover {background-color:#8198c9;}

	li.twitter-menu {background-color:#55acee;}
	li.twitter-menu:hover {background-color:#8fc9f3;}

	li.pinterest-menu {background-color:#a9262a;}
	li.pinterest-menu:hover {background-color:#dc6164;}

	li.linked-menu {background-color:#1a84bc;}
	li.linked-menu:hover {background-color:#64bbea;}

	li.yelp-menu {background-color:#c41200;}
	li.yelp-menu:hover {background-color:#930c00;}

	li.trip-menu {background-color:#579441;}
	li.trip-menu:hover {background-color:#73b759;}


	li.shop-menu {background-color:#ff6600;}
	li.shop-menu:hover {background-color:#883600;}


/*------------------------------------------------*/
/*------------------ OPTIONAL --------------------*/
/*------------------------------------------------*/


/* add a drop shadow to the top header */
	#top-header {
    		-moz-box-shadow: 0px 1px 7px 2px #ccc;
    		-webkit-box-shadow: 0px 1px 7px 2px #ccc;
    		box-shadow: 0px 1px 7px 2px #ccc;}


/*------------------------------------------------*/
/*--------[End Square Icon Menu Links] -----------*/
/*------------------------------------------------*/

 

As you can see I threw in a little snippet in case you wanted to add a slight shadow underneath the top header. It works well when using the same color on the top-header and the main-header. Check out the demo here: http://montereydev.com/demos/headersocialicons/

But if you dont want it, just leave it out when you copy and paste. You can also remove icons and add icons to the CSS above and the menu.

 


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


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest