I'm using the same HTML/CSS properties for a website that supports two languages. The search bar works fine in English but I cannot input anything when I change to the other language.
The website: http://barajon.com/store/
You can change the language by clicking the green flag on the top menu.
The HTML of the search bar:
<!-- Header Search Begin -->
<form class="h-search" method="post" action="search.php" name="productsearchform" onsubmit="javascript:return TXS_funcSubmitForm();" style="border-style: none; width: auto;">
<fieldset>
<input type="hidden" name="simple_search" value="Y" />
<input type="hidden" name="mode" value="search" />
<input type="hidden" name="posted_data[by_title]" value="Y" />
<input type="hidden" name="posted_data[by_descr]" value="Y" />
<input type="hidden" name="posted_data[by_sku]" value="Y" />
<input type="hidden" name="posted_data[search_in_subcategories]" value="Y" />
<input type="hidden" name="posted_data[including]" value="all" />
<div class="srch-area">
<input type="text" class="srch-fld" name="{if $TXS_search_id && $active_modules.Predictive_Search ne ""}{$TXS_search_id}{else}posted_data[substring]{/if}" id="TXS_PS_search" id="TXS_PS_search" value="{$search_prefilled.substring|escape}" />
<input class="sbmit-btn" name="" value="Go" type="submit" />
<div class="clear"></div>
</div>
<input type="hidden" name="txs_area" value="C" />
</fieldset>
</form>
<!-- Header Search End -->
The reason you cannot input text into the text box is that it is being covered by another DIV. The part of the DIV which is covering the text box is 'invisible' to the user (doesn't have a background colour or a border to signify it's there).
To force your text box to appear in front of the DIV, change the text box's z-index to a larger number, let's say 9999. Since z-index only applies to positioned elements, you must change the position of your text box to either relative, fixed, or absolute.
In your particular example, I would recommend you set the position and z-index of the div that contains the text box instead of the text box itself. In your case I would change the line:
<div class="main-menu">
to
<div class="main-menu" style="position:relative;z-index:9999;">
Modifying the class main-menu would be the better idea to achieve consistency across your entire site, either way this will fix your issue.
When I remove position: relative from .banner, it works:
.banner{
margin: 0;
padding: 10px 0;
display: block;
}
The reason for that is that using relative positioning for .banner makes it go over .main-menu. Thus, clicking on the search field doesn't do anything because technically, you're not clicking on the search field at all.
Other method to fix this would be the usage of z-index but I think that when you don't really change the relative position of .banner, there is no need to use position: relative.