Adding the search form to the nav bar does not require any additional CSS because the Clean theme has the style code for this built in.
However, you need to add the Search code to the content of your nav bar if you would like to display it in the nav instead of the sidebar:
To do this, go to Design > Content and first add the Search module to your sidebar. Once this is added, view your blog and right click on your blog page. Select View Source.
Then search in the code for the section that begins with <!-- Blog Search Module --> the code will look similar to this:
<div class="module-search module">
<h2 class="module-header">Search</h2>
<div class="module-content">
<form id="search-blog" method="get"
action="http://themes.typepad.com/.services/blog/6a01675ec1e641970b0154384beb3e970c/search">
<input type="search" name="filter.q" results="5" value="" />
<input type="submit" value="Search" />
</form>
</div>
</div>
Note: this code is for THIS blog. The code for YOUR blog will be different with the action URL.
Copy the red section from your blog and go to Design > Content and click the little pencil icon in the Navigation Bar configuration. Toggle to the Advanced input, and there right before the last tag add:
<li class="nav-list-item nav-search">
Then paste your search code. After your search code, add the closing tag:
</li>
Save your content and now you'll see the Search form in your nav bar (and can now remove it from your sidebar).
Comments
You can follow this conversation by subscribing to the comment feed for this post.