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

**kiddie** · May 3, 2012 03:17

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

.

**RyanReese** · May 3, 2012 04:00

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?)

**kiddie** · May 3, 2012 06:18

Originally Posted by RyanReese

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?)

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 ?

**ralph.m** · May 3, 2012 06:52

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.

**kiddie** · May 3, 2012 07:13

Originally Posted by ralph.m

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.

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.

**kiddie** · May 3, 2012 07:26

Originally Posted by ralph.m

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.

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

**RyanReese** · May 3, 2012 08:00

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.

**kiddie** · May 3, 2012 08:59

Originally Posted by RyanReese

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.

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.

**RyanReese** · May 3, 2012 09:07

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.

Code:

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

**kiddie** · May 3, 2012 09:19

Originally Posted by RyanReese

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.

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

.

**RyanReese** · May 3, 2012 11:34

You still didn't answer about WHAT you want.

. What do you want linked? The entire header? Just the "logo" part?

**kiddie** · May 4, 2012 02:29

Originally Posted by RyanReese

You still didn't answer about WHAT you want.

. What do you want linked? The entire header? Just the "logo" part?

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 :-

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

**kiddie** · May 4, 2012 03:05

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

Thanks

.

**ralph.m** · May 4, 2012 04:58

Originally Posted by kiddie

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

Thanks

.

That link isn't working.

**kiddie** · May 4, 2012 05:13

Originally Posted by ralph.m

That link isn't working.

Thanks ralph.
I have got it. And it's resolved

.

**ralph.m** · May 4, 2012 06:32

Cool. Glad it's sorted.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions