treehouse : what would you like to learn today?
Web Design Web Development iOS Development

search bar in secondary navigation

  • I am looking to move my search bar from the sidebar to the secondary navigation above my header image. If someone could help me out that would be great. Thanks!

    http://petrowest.squarespace.com/
  • keep this whole



    <div class="section"></div>



    under your navigation or where do u want it.
  • I am going to put it on the right hand side of "social media"

  • <div id="topNav">
    <a href="yourdomain.com/page">Home
    </a><a href="yourdomain.com/page">Site Map
    </a><a href="yourdomain.com/page">Locations
    </a><a href="yourdomain.com/page">Social Media
    </a>
    <div style="float: right;" class="section">
    <div class="content-passthrough"><div class="widget-wrapper widget-type-search" id="moduleContentWrapper15504266"><div id="moduleContent15504266">


    <!-- <form method="get" action="/display/Search">
    <div class="search-form-pt-wrapper">
    <div class="search-form-pt">
    <span class="queryFieldWrapper"><input type="text" class="text queryField" name="searchQuery" value=""/></span>
    <span class="queryButtonWrapper"><input type="submit" class="button queryButton" value="&raquo;"/></span>
    <input type="hidden" name="moduleId" value="15504266"/>
    <br class="clearer"/>
    </div>
    </div>
    </form> -->

    <form action="/display/Search" method="get">
    <input type="hidden" value="15504266" name="moduleId">
    <table cellspacing="0" cellpadding="0" border="0" class="search-form-pt-wrapper search-form-table">
    <tbody><tr class="search-form-pt search-form-row">
    <td class="queryFieldCell search-form-cell">
    <span class="queryFieldWrapper">
    <input type="text" value="" name="searchQuery" class="text queryField">
    </span>
    </td>
    <td class="queryButtonCell search-form-cell">
    <span class="queryButtonWrapper">
    <input type="submit" value="→" class="button queryButton">
    </span>
    </td>
    </tr>
    </tbody></table>
    </form></div></div></div>
    </div>
    </div>


    update this class

    .content-passthrough table.search-form-table {
    border-collapse: collapse;
    width: 200px;
    }