Add social media icons to your navigation bar

Adding social media icons to your blogs navigation bar is just like adding links, but instead of text we’ll be using images / icons. I’ve updated this post to be less specific so it can be tweaked and applied to any navigation.

1. Add a class to your current navigation

Go to Layout and click edit on the HTML/Javascript gadget that has your custom navigation. Add class="navleft" to the ul of your link navigation, like so

<ul class="navleft">

We’ll use the class later on to position the menu.

2. Add social icons to the navigation

Exactly where you place the social icons depends on how you’ve set up your navigation. If you used this tutorial for a standard navigation or this tutorial for a drop-down navigation, then add the following under </ul> but before </div>.

<ul id="cssnav" class="navright">
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<!-- ADD MORE ICONS HERE -->
</ul>

Notice we’ve also added a class to this UL. Fill in your information and the direct link to icon image. To add more icons or add a rollover/hover over effect check the full tutorial here.

3. Position Both Menus – Move links to the left, icons to the right

We can use floats to position the links on the left and the icons on the right. Floating an object basically “pushes” it to one side in order to allow other elements to wrap / flow around it. I’ll do a post on this in the future. We’ve added classes above to both UL tags (class="navleft" and class="navright") so we can apply the float to those. Go to Template > Edit HTML and find the following

]]></b:skin>

Add the following code above it

.navleft {float:left; width: 50%;} .navright {float:right; width: 50%;} .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px;}

You can alter the width value if needed. The values for margin-right and margin-left removes the default Blogger margins which will cause our links to go off screen.

4. Add a Background

If your menus now look like two separate menus, you’ll need to add a background to the parent div that wraps around both of the UL tags.

For example if your code looks like the following

<div class="CLASSNAME">

<ul class="navleft"> ... </ul>
<ul class="navright"> ... </ul>

</div>

Use the class from the div, in this case CLASSNAME to add a background colour like this

.CLASSNAME {background: #000000;}

Change the value #000000 to match your navigation.

5. Adjust the space between icons

Your icons will have the same spacing as your text links due to the CSS, to override that you can use the following to reduce only the spacing between the icons

.navright li a {padding-left: 0; padding-right: 0; }

Adjust the number if you want to add padding.

Your template may be overriding the code. If this is the case and you don’t feel comfortable editing the original template code, you can add !important to the code above, like so

.navright li a {padding-left: 0 !important; padding-right: 0 !important; }

More in depth tutorial for each section

• Add a drop down menu that can be style with Bloggers Template Designer
• Make navigation stick with scrolling
• How to make your own social media icons
• Add social media icons to your blog
• Add hover over effects for your social media icons & other images
• All navigation tutorials