Dear all,
In WordPress, with the theme Atahualpa, in Theme Options - Style & edit Header area - Show Search Box, if you choose Yes, the search box will be placed in the bar where the logo and the Blog Title are.

For a website I'm setting up, I didn't like that, and I wanted the search box in the menu bar. (A horizontal Pages menu bar.)

Before I added the search box to this menu bar, it looked like this:



I figured out how to add the search box to this menu bar, but I've still got a problem that I can't seem to solve.

This is what I did:
I changed the file atahualpa\functions\bfa_header_config.php as follows:

Find “ // Search box”, and delete the part about the Search box.
Now find the line “// Close table if centered”, and right before that, I pasted:

// Search box
if ( $bfa_ata['show_search_box'] == “Yes” )
{
echo ‘<li style=”float:right; border-top: solid 1px #CCCCCC;”>
<form method=”get” action=”‘ . home_url() . ‘/”>
<div >’ .
// Check for WP 2.2 which doesn’t know get_search_query
( function_exists(‘get_search_query’) ? ‘
<input type=”text” onfocus=”this.value=\” .
( get_search_query() ? get_search_query() : ” ) . ‘\’”
value=”‘ . ( get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ) .
‘” onblur=”this.value=\” . ( get_search_query() ? get_search_query() :
$bfa_ata['searchbox_text'] ) . ‘\’” name=”s” />’ :
‘<input type=”text” name=”s” />’) .
‘</div>
</form>
</li>
‘;
}

This works just fine.

Now I only have this problem:
By doing this, the menu bar becomes higher than it's supposed to be. The menu bar and the menu items all have a thin solid grey border, and now you can see that the menu items are have less height than the menu bar they're in.
Also, you can see that the search box is a bit too high, so the border right below it disappears.
(I set these borders in Atahualpa Theme Options – MENU 1 (Page Menu) – Border around all menu items: solid 1px #cccccc.)

Here you can see what I mean:



I don't like this.

I found one possible solution, but this causes other problems:

I added the line “height: 11px;” to Atahualpa Theme Options – Style Forms – Form fields: Style. This helps: the menu bar looks cool again. But now, if I add a form to a page with multi-line input field, the input field is also only 11 px high...
So this 'solution' doesn't work for me.

Can anyone help me, please?

Thanx in advance, Laura

I wouldn't edit the bfa_header_config.php file as this edit will not survive a theme upgrade and as you found out produces unknown issues. I would use CSS to position the search box where you want.

That's a good idea of course, but.... how?

You determine the CSS selector (I use Firebug with Firefox) and then use the proper CSS to position it. w3schools.com/css has all the info you would need for positioning.

As far as I understand it, it's coded hard into the PHP-file, where it says the search box should be in the logo-area. It's a table. So it would be really difficult to reposition it with CSS, or, as far as I can see, impossible even.

This thread from today was about the same issue and the use of negative margins worked.

It looks like I have a solution, but still by adjusting the php-file.
I keep the adjustment I made, and in the line beneath 'function exists' I add this:
style="height: 0.7em;"

So instead of

<input type=”text” onfocus=”this.value=\” .

it now says

<input  style="height: 0.7em;" type="text" class="text inputblur" onfocus="this.value=\'' .

Okay, Ive put the original php files back, and now I'm trying to reposition the search box by creating a negative margin. Thus far, it doesn't work.
Now, in Atahualpa Theme Options - Style & Edit Header Area - Show search box?, I chose YES.
Search box:
border: 0px dashed #cccccc;
border-bottom: 0;
width: 100px;
margin: 0px 0px -150px 0;

It does go a bit down, but it can't seem to 'leave' bar2.
http://www.bethlehemcoaching.nl/wordpress/

It looks like you have if figured out.

I can play with that too, but when I check in Firefox, it looks oké but in IE it doesn't.

I changed it back, but how could I fix this?

To make this work in IE try adding the following to your css

position: relative;

Originally Posted by lmilesw

It looks like you have if figured out.

Yes, I did!! I put this in search box styling:

border: 0px dashed #cccccc;
border-bottom: 0;
width: 180px;
margin: 0px 0px -48px 0;
padding: 13px 19px 0px 0px;

And that was it! It's a miracle! Now, I don't need to change the php-files anymore!