Jump to content
Sign in to follow this  
gayatriom

How can I add social media icons to navigation

Recommended Posts

cmunns

what does your site look like? Which section are you using for the header rather? This will be done with a hook.

Share this post


Link to post
Share on other sites
gayatriom

Hey. I am using BrandNav Section .

Share this post


Link to post
Share on other sites
joshbowers

I added this to the Functions file in the base theme:

add_action('brandnav_after_nav', 'brandnav_icons');
	
	function brandnav_icons() { ?>
	  <div class='icons'>
	    
	  </div>
	<?php }[/code]

	
	And added this to the stylesheet:
	
	
[code].icons { bottom: 5px; height: 24px; line-height: 20px; position: absolute; right: -80px; text-align: right; }

Not sure if my CSS is the most eloquent solution for placement but it seems to work. Might have to experiment yourself as well as add those other social icons.

Share this post


Link to post
Share on other sites
joshbowers

Sorry... code didn't show up all that well: ` add_action('brandnav_after_nav', 'navigation_icons'); function navigation_icons() { ?>

<?php } ` Lose the `s when pasting.

Share this post


Link to post
Share on other sites
joshbowers

Never minds about the losing the things that automatically are taken out by the message board apparently... Haven't posted much on here, didn't know.

Share this post


Link to post
Share on other sites
catrina

Thanks for the solutions, Josh. Gayatri, did you find the proper solution for your icons?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
gayatriom

Hey this was perfect! thanks so much!

Share this post


Link to post
Share on other sites
gayatriom

Wait. how can I make the icons bigger?

Share this post


Link to post
Share on other sites
Kate

Hi Gayatri, To make the image itself bigger, you would have to modify the image file. (Modifying your source image will prevent any pixelation.) Then you will also have to assign the new height/width for the anchor tags... Something like:

.icons a{height:XXpx;width:XXpx;}

Share this post


Link to post
Share on other sites
gayatriom

OK. so a added this to custom code:

.icons .twitterlink {background: url(http://justonekind.com/wp-content/uploads/FaceBook-icon1.png) no-repeat;}
	.icons .facebooklink {background: url(http://justonekind.com/wp-content/uploads/FaceBook-icon1.png) no-repeat;}
	.icons a{height:40px;width:40px;}
	
	 .icons {
	
	    bottom: 5px;
	
	    height: 24px;
	
	    line-height: 20px;
	
	    position: absolute;
	
	    right: -80px;
	
	    text-align: right;
	z-index:100;
	
	}
	
	

Now. the icon just disappeared. funnily enough when I right click on the area to 'inspect' it SHOULD be I see a a selection box pop up and my firebug software tells me it's the icons css. but i don't see the icon. weird.

Share this post


Link to post
Share on other sites
gayatriom

Hey this is not solved. Please help.

Share this post


Link to post
Share on other sites
catrina

Please remove the CSS you added last. Did you already resize the icons in an image program and re-upload them?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
gayatriom

Hey. ya . resized the icons in photoshop and uploaded them - 40 x 40 is the size. Oh wait there was a development . Ok. it shows up now, but now twitter and fb are on top of each other not side by side and when i mouse over the icons they disappear.

Share this post


Link to post
Share on other sites
catrina

The larger size of the icons probably caused the Twitter and FB buttons to be stacked on top of eachother. In this code you should make the value 45px to allow a cushion of space:

.icons a{height:40px;width:40px;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
gayatriom

ok so it should be .icons a{height:45px;width:45px;} ?

Share this post


Link to post
Share on other sites
gayatriom

Hey Catrina. First of all thank you SO much for being SO helpful. Secondly, that didn't work :( .

Share this post


Link to post
Share on other sites
gayatriom

Ok sorted. check it out justonekind.com

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×