addling buttons in social area and between social and top nav?

I need to add some graphical buttons like shopping cart, Live chat with customer support etc etc. How to put such buttons in the social icons area and also how to do same if I wanted to add those button in the white space between social icons and top nav? See below:

 

You can add your images as a button in the social icons area by replacing the social icons with your button images, having the same name as the social icons, from the images folder present in your Theme directory.
And then paste the following code in your Custom CSS
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

.social_logos li a span {
background-size: 50px 34px;
width: 64px;
height: 43px;
}

you will required to do some css setting like adjust the height, width and background-size of the span tag as per your requirement.
And it is not possible to add the button in the white space between social icons area and the top navigation area because it required alot of customization in the Theme.

 

Thanks Piyush. Why do I have to replace social icons?

Can we not have new buttons in addition to keeping the social icons there? there's plenty of space Please advise.

 

Go to the header.php file present in your theme directory and add the code given below in that file.

Code:

<div class="graph_button">
<a href="Enter your URL link here"><img src="Enter the URL address of your images" style="float:right;" /></a>
<a href="Enter your URL link here"><img src="Enter the URL address of your images" style="float:right;" /></a>
</div>

See the image given below for the reference.


This will solve your issue.

 

Thanks Piyush!

Your solution actually put the buttons in the white space between the top menu and social icons and now looks like the below screen shot. So, I just need to align them neatly now, please tell me two things:
1. How can I put the new buttons (Chat and free report) in the same area as social icons?
2. How can I move the buttons up and down to match the alignment with each other?

 

Please do let me know your website link so that we can provide you the exact solution.

 

Piyush: I'm working on a demo site which you can see at http://webworxworld.com/client-demo/ Thanks!​

 

Hello Devesh,

Go to the header.php and replace your first image code with

Code:

<a href="#"><img src="http://webworxworld.com/client-demo/wp-content/uploads/2013/04/chat_button.jpg" style="float:right; margin-top: 10px;"></a>

Add your link in place of #

 

and how do I move these side by side to social icons?

 

Hello,

It is not possible to add extra icons side by side to social icons, It requires lots of customization, If you want to do so then call freelancer to do that.