How to I add social icons to the header?

(4 posts) (2 voices)

1. 

   nabeelahmed
   Member

   Can you please walk me through adding social icons to the header? I am also thinking about adding a live chat button. What do I need to do here to accomplish this?

   Posted 1 year ago #
2. 

   Elliott
   Support

   Hello nabeelahmed,

   You will need to open up /wp-content/themes/infocus/header.php and add a <div> container for your images. Around the bottom of the file you should see this,

   `</div><!-- main_navigation -->
   </div><!-- inner -->
   </div><!-- header -->`

   You can go ahead and place your div there like this,

   `</div><!-- main_navigation -->

   <div style = 'position: absolute; top: 0px; left: 0px;'>
   <img src = "IMAGE URL" />
   </div>

   </div><!-- inner -->
   </div><!-- header -->`

   You can play around with the top and left values to position it. Make sure to replace "IMAGE URL" with the URL to your image.

   Posted 1 year ago #
3. 

   nabeelahmed
   Member

   So if I need to add multiple images i.e. image for Facebook icon, Twitter icon, YouTube icon, etc. how do I link them within the div tag? Also I am trying to put these in a top right corner, is there a default position value for that?

   Posted 1 year ago #
4. 

   Elliott
   Support

   inFocus by default does not have an area for you to place header icons like Awake does so you will need to place your images in the div that I specific above.

   To position it then make sure to change the top and left attributes as shown above. You would do something like this, style = 'top: 100px; right: 100px;' for the top right corner.

   Let us know if this works for you.

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.