zurb foundation - Search Box Hides Links -

i'm wondering if foundation bug, or if i've missed in code. nav bar structured follows:

<div class="sticky noprint"> <nav class="top-bar" data-topbar role="navigation">    <ul class="title-area">     <!-- li needs here for strange reason make mobile menu work -->     <li class="name">         <!-- <h1><a href="">home</a></h1> -->     </li>     <li class="toggle-topbar menu-icon">         <a href="#"><span>menu</span></a>     </li>   </ul>    <section class="top-bar-section">      <!-- left nav section -->     <ul class="left">        <!-- class dropdown -->       <!-- <li><img src="background180.png" alt="background120" width="225" height="60"></li> -->       <li class="has-dropdown">         <a href="classes.php">courses</a>         <ul class="dropdown">             <li><a href="classes.php">all classes</a></li>                     <li class="has-dropdown">                         <a href="#">course admin</a>                         <ul class="dropdown">                             <li><a href="searchcourse.php">search course</a></li>                             <li><a href="searchcourse.php">edit course</a></li>                             <li><a href="editcourse.php">add course</a></li>                         </ul>                     </li>         </ul>       </li>       <!-- class dropdown ends -->         <!-- learner dropdown -->        <li class="has-dropdown">         <a href="searchstu.php">learner</a>         <ul class="dropdown">             <li><a href="searchstu.php">search learner</a></li>           <li><a href="editstudent.php">add learner</a></li> <li><a href="searchstu.php">edit learner</a></li>                     <li><a href="selectstu.php?all=true">list active learners</a></li>         </ul>       </li>       <!-- learner dropdown ends -->        <!-- grades dropdown -->        <li class="has-dropdown">             <a href="#">grades</a>             <ul class="dropdown">                 <li class="has-dropdown">                     <a href="#">view , enter grades</a>                     <ul class="dropdown">                         <li><a href="gradesbycourse.php">all courses</a></li>                     </ul>                 </li>                 <li class="has-dropdown">                     <a href="#">grade templates</a>                     <ul class="dropdown">                         <li><a href="addgradetemplate.php">create template</a></li>                         <li><a href="editgradetemplate.php">active templates</a></li>                         <li><a href="editgradetemplate.php?all=true">all templates</a></li>                     </ul>                 </li>             </ul>         </li>       <!-- grades dropdown ends -->        <!-- employee dropdown -->       <li class="has-dropdown">         <a href="searchemp.php">employee</a>         <ul class="dropdown">           <li><a href="editemp.php">add employee</a></li>          <li><a href="searchemp.php">edit employee</a></li>          <li><a href="searchemp.php">search employee</a></li>          </ul>       </li>       <!-- employee dropdown ends -->        <!-- reports dropdown -->       <li class="has-dropdown">         <a href="#">reports</a>         <ul class="dropdown">             <li class="has-dropdown">             <a href="#">program</a>                 <ul class="dropdown">                             <li><a href="newstus.php">new registrations</a></li>                             <li><a href="email.php?program=1">email active students</a></li>                             <!-- <li><a href="email.php?program=1">email active students using default client</a></li> -->                             <li><a href="reports.php">weekly course report (your courses)</a></li>                             <li><a href="reportsactive.php">weekly course report (active courses)</a></li>                             <li><a href="reportsinactive.php">weekly class report (inactive courses)</a></li>                             <li><a href="gradestoenter.php">grades</a></li>                             <li><a href="gradestoenterold.php">grades (old system)</a></li>                             <!-- <li><a href="reportprogram.php">program totals</a></li> -->                             <!-- <li><a href="ministryaction.php">ims action</a></li> -->                             <!-- <li><a href="exitneedsaction.php">exited needs action</a></li> -->                 </ul>             </li>                     <li class="has-dropdown">                     <a href="#">reporting</a>                         <ul class="dropdown">                             <li><a href="newregcsv.php">new reg csv for</a></li>                             <li><a href="newregcsv.php">new reg csv for</a></li>                             <li><a href="activenoeois.php">active - no</a></li>                             <li><a href="banneraction.php">action</a></li>                             <li><a href="3monthfu.php">exit 3-month follow-up</a></li>                             <li><a href="6monthfu.php">exit 6-month follow-up</a></li>                             <li><a href="12monthfu.php">exit 12-month follow-up</a></li>                         </ul>                     </li>                     <li class="has-dropdown">                     <a href="#">counsellor</a>                         <ul class="dropdown">                             <li><a href="notattending.php">100 day no attendance</a></li>                             <li><a href="activenoclasses.php">active - no classes</a></li>                             <!-- <li><a href="3monthpause.php">pause 3-month follow-up</a></li> -->                             <!-- <li><a href="allonpause.php">all paused students</a></li> -->                         </ul>                     </li>                     <li class="has-dropdown">                     <a href="#">dup</a>                         <ul class="dropdown">                             <li><a href="activenoeoisd.php">active - no</a></li>                             <li><a href="banneractiond.php">banner action</a></li>                             <li><a href="3monthfud.php">exit 3-month follow-up</a></li>                             <li><a href="6monthfud.php">exit 6-month follow-up</a></li>                             <li><a href="12monthfud.php">exit 12-month follow-up</a></li>                             <li><a href="notattendingd.php">100 day no attendance</a></li>                             <li><a href="activenoclassesd.php">active - no classes</a></li>                             <!-- <li><a href="3monthpaused.php">pause 3-month follow-up</a></li> -->                             <!-- <li><a href="allonpaused.php">all paused students</a></li> -->                             <!-- <li><a href="exitneedsactiond.php">exited needs action</a></li> -->                         </ul>                     </li>         </ul>       </li>       <li class="has-dropdown">         <a href="#">account</a>             <ul class="dropdown">               <!-- <li class="active"><a href="#">right button active</a></li> -->               <li><a href="mailto:">request access</a></li>             <li><a href="mailto:">report bugs</a></li>                  <li><a href="login.php">login</a></li>                 <li><a href="editemp.php?enum=">edit account</a></li>                     <li><a href="logout.php">logout</a></li>             </ul>         </li>          <!-- reports dropdown ends -->      </ul>     <!-- left nav ends -->      <!-- right nav section -->     <ul class="right">         <li class="has-form">         <form name="form" action="select.php" method="get">             <div class="row collapse">                 <div class="large-8 small-9 columns">                     <input type="text" name="search" id="search" style="height: 29px" placeholder="">                 </div>                 <div class="large-4 small-3 columns">                   <input type="submit" class="button expand" value="search">                 </div>             </div>           </form>         </li>     </ul>     <!-- end right nav section -->    </section> </nav> </div> 

so i'm wondering is: desktop works perfectly. when shrink mobile screen size, perform search, search bar takes on entire menu , won't show hamburger menu it's supposed to. can suggest fix? in advance!