How to add social media icons at the top right of the header ?

Do the following to add social icons above the navbar.

1) Please do remember to back-up the files prior to anychange.

2) Open wp-content/themes/Tyler/header.php.

3) Around line number 44, you can find:

4) Please add the below code above <nav class=”navbar” role=”navigation”>

<?php /* Socian Icons */ ?>
<div id=”top-social”>
<a href=”https://www.facebook.com/event” target=”_blank”><img title=”Facebook” src=”<?php echo get_template_directory_uri()?>/images/facebook.png” alt=”Facebook” width=”24″ height=”24″ /></a>
<a href=”http://twitter.com/event” target=”_blank”><img title=”Twitter” src=”<?php echo get_template_directory_uri()?>/images/twitter.png” alt=”Twitter” width=”24″ height=”24″ ></a>
<a href=”https://www.linkedin.com/event” target=”_blank”><img title=”Linkedin” src=”<?php echo get_template_directory_uri()?>/images/linkedin.png” alt=”Linkedin” width=”24″ height=”24″></a>
</div>
<?php /* Socian Icons */ ?>

5) Replace href attributes and img paths. And also, upload the images to wp-content/themes/Tyler/images folder.

(facebook.png, twitter.png etc.)

6) Open wp-content/themes/Tyler/css/layout.css

7) Add the following style at the end of the page:

#top-social{position:relative;z-index:100;float: right;padding-top: 10px;padding-right: 5px;}

8) Save both the file.

Was this article helpful to you? Yes 1 No 3