Search Bar placement and icon

[DianeClancy]

Hi .. I am helping a friend and she has a double header.  So I used a text widget to get the header above the other header (thank you, Weaver!!!)  (she doesn’t want the site to be active yet so I can’t show you it)

So there is a header above, then the menu above the regular header.  The search bar shows up on the same line as the menu.

She wants the search bar to be at the top right of the top header (that is in the text widget).  She also wants the word “Search” rather than the spy glass.

I have looked but don’t see how to do this.  Is it possible?  And if so, please I would love to know how to do it 🙂

Thank you so much!!  ~ Diane Clancy

[Weaver]

Try the [search] X-Plus shortcode in a text widget and hide the default header search spy glass version.

[scrambler]

Ultimatley, if you need that kind of help, we have to be able to look at the site so we can see exactly what is there and test solutions.

If she does not want the site accessed, you need to create a test site online where you can recreate the same environment for us to look at. You can do that in a subfolder of an existing site.

[DianeClancy]

Thank you, Weaver – so that is with the X-Plus, only, right?

Scrambler, maybe I will do this tomorrow – thank you so much!! 

~ Diane Clancy

[scrambler]

The shortcode to be able to insert the search anywhere is indeed a plus option.

We can try to see if we could move the default header search where you want with custom CSS, but for that we need a link to a page showing the exact configuration.

[DianeClancy]

Thank you, Scrambler – I will see what I can do tomorrow to be able to show you – so I could do that in my sandbox 🙂

[DianeClancy]

I made the site in here again  http://dianeclancy.com/sandbox/

So here is the exact page, Scrambler – thank you so very much!!  ~ Diane Clancy

[scrambler]

You can try using the rules below in the theme Custom CSS rule box.

DO test to make sure it does not have side effects

#branding {position:inherit;}
#header-search {position:absolute;top:0px;right:0px;}

Adjusting the top and right values

[DianeClancy]

Thank you again, Scrambler!!  I will test this in the morning!!  You are the best  🙂  🙂 🙂  ~ Diane Clancy

[DianeClancy]

hmmmm, Scrambler – it didn’t move the search spy glass  🙂

http://dianeclancy.com/sandbox/

Any other thoughts or did I do something wrong?

I put it in the CSS here

Search Boxes		Search box related options

Thank you so very much again!!  ~ Diane Clancy

[scrambler]

You inserted the rules at the wrong place I suppose as your CSS shows

.search-field,#header-search .search-field:focus #branding {position:inherit;}
#header-search {position:absolute;top:0px;right:0px;}

instead of

#branding {position:inherit;}
#header-search {position:absolute;top:0px;right:0px;}

The rules I gave you were to insert in Main Options > Fonts & custom > Custom CSS rule box

[DianeClancy]

Oh my goodness – it works 🙂  🙂

You are the best!!  Thank you so very much, Scrambler for your patience and help!!

~ Diane Clancy

[Author]

Posts