• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Search form positioning in primary nav

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: resolved

Tagged: Magazine Pro, menus, primary menu, search

  • This topic has 2 replies, 2 voices, and was last updated 8 years, 11 months ago by cookieandkate.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 26, 2014 at 10:23 pm #92597
    cookieandkate
    Member

    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

    February 27, 2014 at 10:41 am #92683
    pxforti
    Participant

    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

    March 4, 2014 at 1:56 am #93331
    cookieandkate
    Member

    Bummer, ok. Thank you for letting me know.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble