Search form positioning in primary nav

Community Forums Forums Design Tips and Tricks Search form positioning in primary nav

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  cookieandkate 9 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #92597

    cookieandkate
    Member
    Post count: 60

    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

    #92683

    pxforti
    Participant
    Post count: 68

    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

    #93331

    cookieandkate
    Member
    Post count: 60

    Bummer, ok. Thank you for letting me know.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.