Add social media icons to menu bar

Author Message

Posted: 1/18/2012
Quote message 

I've seen help for adding a search form to the menu bar but I need to add social media icons to the right of the menu bar.

I've Googled but and found info for specific themes but can't seem to adapt the code to fit my Artisteer template.

Any help would be much appreciated.

Posted: 1/18/2012
Quote message 

You can add a div into your menu that you can add you content for your social icons.

open your header.php and find:
<div class="art-bar art-nav">

Add this after that code:
<div class="socialbar">YOUR CONTENT GOES HERE</div>

add this to your style.css file and adjust as you need.

.socialbar {
margin:10px 40px 0px 0px;
height: 20px;
.art-nav-outer {width:70%;} <- you can't set this to small or you will mess up you menu. It should be 100% - width from the socialbar

Posted: 1/19/2012
Quote message 

Thank you for this. I've added the code, icons and links.

The icons show up but they aren't clickable. I've checked and rechecked the code.

Not sure what's gone wrong.

Posted: 1/19/2012
Quote message 

you need to make sure the .art-nav-outer is not overtop of them. you may need to adjust the setting some for widths.

If you have chrome or firefox install the firebug extension then you can easily inspect the elements of your site and see which elements are doing what.

If you want to link it I can take a look at it for you as well just in case it may be something else interfering


Posted: 1/27/2012
Quote message 

Hi Techtom.
Thanks for all your help so far. I've been playing with firebug and it appears to be the padding values.

If I change it the menu goes askew and the icon links work. Not sure where else to change it so that everything sits right.

the site is here

Posted: 2/4/2012
Quote message 

I finally got this working.
For anyone having the same problems, I just changed the artnav-wrapper width to auto rather than a fixed pixel width.

Posted: 7/15/2012
Quote message 

Hi want the same thing help would be great thanks


Posted: 3/4/2015
Quote message 

I would love this tutorial please? I'm trying to made it for a blogger template.