Add social media icons to menu bar


Author Message
ppoconnor

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.
 
techtom

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;
width:30%px;
height: 20px;
float:right;
}
.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
 
ppoconnor

Posted: 1/19/2012 Quote message   

Hi
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.
 
techtom

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


 
ppoconnor

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 http://79.170.44.85/soneniandthesoul.com/
 
pasha

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.
 
Boladeblogger

Posted: 3/4/2012 Quote message   

I tried this but it is not working. Techtom can you please give a step by step way of getting this done. I will be do greatful.

Thanks
 
Dean

Posted: 7/15/2012 Quote message   

Hi want the same thing help would be great thanks

 


Artisteer is not affiliated with or endorsed by Joomla!™ or Drupal™ or WordPress™ Projects.

Other services from Artisteer Team: Themler, BillionPhotos, BillionThemes and Createer is coming soon.

Copyright © 2008-2014 by Artisteer, Ltd