Search Bar Permanently Expanded

[dschoeff]

I’m using the search bar in the primary menu bar. The client has asked if it can be permanently expanded rather than just the magnifying glass icon. The site is http://okw.ourkidswalk.com/ and I’m using Weaver XTreme with the Pro plugin.

[scrambler]

It took me a little while to figure it out, But I think you can do that by doing the following

Add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

#header-search .search-field,.header-search .search-field,.menu-search .search-field {background-color:#f0f0f0;border:2px solid #c3c0ab;cursor:text;outline:0;width:230px}

If you are changing any of the values in that rule, you will need to also add the following one with the same modified values

#header-search .search-field:focus,.header-search .search-field:focus,.menu-search .search-field:focus {background-color:#f0f0f0;border:2px solid #c3c0ab;cursor:text;outline:0;width:230px}

[dschoeff]

Very nice. Thanks scrambler.

[Maureen]

WEaver Extreme Plus plugin also has a short code that will let you set the width.  

Appearance/Extreme Plus/Search Form:

The [search] shortcode allows you to display a search box within a page, post, or text widget.

Shortcode usage: [search button=1 class=your_class max_width=nn size=nn]

1. button – if set to 1 or true, will add “Search” button to right of input area
2. class – a custom class name to wrap the search form
3. max_width – the maximum width in percent of the search form (Default: 90)
4. size – size of the form input area in characters (Default: 40)

[Author]

Posts