Search form positioning in primary nav

[cookieandkate]

Hello!

I added the search form to my primary nav via the Genesis Theme Settings > Primary Navigation Extras option. I then edited my CSS to make sure the search form remains visible, even as I shrink the width of the responsive menu.

My menu looks just right at full width. The problem is that as I shrink the width of the menu, the search form falls to the second line. I want the search form to stay on the top line on the far right. The text menu items should flow to the second line. I'm not sure how to make this happen because the search form is just a list item like the others.

Can anyone help me find a solution to this? My theme is Magazine Pro. I'm working on a local test site now so I can't provide a URL. Here's the CSS that produces the menu:

<nav class="nav-primary" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<div class="wrap">
<div id="responsive-menu-icon"/>
<ul id="menu-below-header" class="menu genesis-nav-menu menu-primary responsive-menu">
<li id="menu-item-10226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10226">
<a href="http://localhost/wordpress-redesign/recipes/">All Recipes</a>
</li>
<li id="menu-item-10269" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10269">
<a href="http://localhost/wordpress-redesign/category/food-recipes/breakfast/">breakfast</a>
</li>
<li id="menu-item-10272" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10272">
<a href="http://localhost/wordpress-redesign/category/food-recipes/salads/">salad</a>
</li>
<li id="menu-item-10273" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10273">
<a href="http://localhost/wordpress-redesign/category/food-recipes/soups-and-stews/">soup</a>
</li>
<li id="menu-item-10271" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10271">
<a href="http://localhost/wordpress-redesign/category/food-recipes/entrees/">dinner</a>
</li>
<li id="menu-item-10270" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10270">
<a href="http://localhost/wordpress-redesign/category/food-recipes/dessert/">dessert</a>
</li>
<li id="menu-item-10275" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10275">
<a href="http://x">Favorites</a>
</li>
<li class="right search">
<form method="get" class="search-form" action="http://localhost/wordpress-redesign/" role="search">
<input type="search" name="s" placeholder="Search..."/>
<input type="submit" value="s"/>
</form>
</li>
</ul>
</div>
</nav>

Thank you so much!
Kate

[pxforti]

the menu automatically wraps if screen gets to narrow. The only way to keep it in one line is to make the elements smaller.

---

writeNowDesign
WordPress and Ecommerce Website Design

[cookieandkate]

Bummer, ok. Thank you for letting me know.

[Author]

Posts