How to add search bar and social icon on header image?

HTML & CSS
1

I am using constructor theme of wordpress.
My site is :- http://digitalfinance.info/sample/

I just wanna use search bar and social media icons on header image ( constructor support header image ) like this image
http://imgur.com/OHegM

how can i do this ? any help please ?

Thanks in advance :slight_smile: .

2

Adding them to your page should be easy. Simple copy paste probably. Do you just not know where to add the social media icons (like where to find the script for it?) :slight_smile:

3

Hello RyanReese,
Thanks for reply.
I can put it , means i can create click able icons. But i just wanna set it to header image as like the picture http://i.imgur.com/OHegM.png . i mean i can set it on upper and lower of header image but can’t in middle of the image.
Any suggestion please ?

4

You could float them to the right and give them top margin or padding to push them down. Or you could position them absolutely, like you’ve done for the menu.

But be careful with a layout like this. Plan it out carefully, rather than just slap things in there any old how. For a start, really thing about how best to do that red band across the top. You are probably better off with a repeating background image across the header element.

5

Hi ralph,
Thanks for your reply. Look, nav menu is under that image. But i just wanna search bar and icons in middle of the header image. Look like that picture.
I can create it , but i can’t set it into the middle of image.
Ok, i just insert a search box there. Please check the behave of box.
Waiting for your reply.

6

I have added 2 same search boxes. please check this and see the behave of those.

7

Look at your HTML. You put those two search boxes inside the <head> element, with the <link>'s, <title>…etc. Move it after the <body>. Right now it’s displaying quite oddly due to the incorrect HTML placement.

That won’t solve the issue, but let’s work from there.

8

Hi Ryan,
Thanks for reply.
I have added 2 same search boxes to see the difference between them. Look at the search box which placed on image is not working. But other is working which is placed top of image.

9

Inside your <header>, you have the form, and then you have two absolute positioned elements. The nav, and #title. The nav is put down, so that’s not interfering. However, the title by default, is at the top of the header. It’s overlapping the form.

What do you want linked? With the anchor? Do you want the entire header to be a link? If that’s the case, just give this. It’ll stack on top.

#searchform{position:relative;z-index:1;}
10

Thanks for reply.
I have updated my header image so you can understood the position of image.
Ok, please take a look of my header.php code . http://pastebin.com/0PZeuHje

and my search style in my style.css http://pastebin.com/dmyhYjEv

May be you can now solve it :slight_smile: .

11

You still didn’t answer about WHAT you want. :). What do you want linked? The entire header? Just the “logo” part?

12

Ok, i have done it myself.
But here is problem
Need to set icons horizontally in footer. Now it is showing vertically.
My icon css code is :-
http://pastebin.com/v89BvXRP

and for this my php code is :-

<div id=“social-logo”>
<ul>
<li><a href=“http://www.twitter.com/”><img src=“http://ideaddict.com/images/Twitter-icon.png?1317226690” /></li>
<li><a href=“http://www.facebook.com/”><img src=“http://www.ourweetrip.com/wp-content/plugins/wp-greet-box/images/facebook_icon.png” /></li>
</ul>
</div>

It is set as horizontally , but not working.
Any help ?
Thanks.

13

You can visit my site again to see the change and problem.
www.digitalfinance.info/sample

Thanks :slight_smile: .

14

That link isn’t working. :frowning:

15

Thanks ralph.
I have got it. And it’s resolved :slight_smile: .

16

Cool. Glad it’s sorted. :slight_smile: