Search Box Hides Links - zurb-foundation

Question

I'm wondering if this is a Foundation bug, or if I've missed something in my code. My nav bar is structured as follows:
<div class="sticky noprint">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<!-- This li needs to be here for for some strange reason to make the mobile menu work -->
<li class="name">
<!-- <h1>Home</h1> -->
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</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">
Courses
<ul class="dropdown">
<li>All Classes</li>
<li class="has-dropdown">
Course Admin
<ul class="dropdown">
<li>Search for a Course</li>
<li>Edit a Course</li>
<li>Add a Course</li>
</ul>
</li>
</ul>
</li>
<!-- Class Dropdown Ends -->
<!-- Learner Dropdown -->
<li class="has-dropdown">
Learner
<ul class="dropdown">
<li>Search for a Learner</li>
<li>Add a Learner</li> <li>Edit a Learner</li>
<li>List All Active Learners</li>
</ul>
</li>
<!-- Learner Dropdown Ends -->
<!-- Grades Dropdown -->
<li class="has-dropdown">
Grades
<ul class="dropdown">
<li class="has-dropdown">
View and Enter Grades
<ul class="dropdown">
<li>All Courses</li>
</ul>
</li>
<li class="has-dropdown">
Grade Templates
<ul class="dropdown">
<li>Create Template</li>
<li>Active Templates</li>
<li>All Templates</li>
</ul>
</li>
</ul>
</li>
<!-- Grades Dropdown Ends -->
<!-- Employee Dropdown -->
<li class="has-dropdown">
Employee
<ul class="dropdown">
<li>Add an Employee</li>
<li>Edit an Employee</li>
<li>Search for an Employee</li>
</ul>
</li>
<!-- Employee Dropdown Ends -->
<!-- Reports Dropdown -->
<li class="has-dropdown">
Reports
<ul class="dropdown">
<li class="has-dropdown">
Program
<ul class="dropdown">
<li>New Registrations</li>
<li>Email All Active Students</li>
<!-- <li>Email All Active Students Using Your Default Client</li> -->
<li>Weekly Course Report (Your Courses)</li>
<li>Weekly Course Report (Active Courses)</li>
<li>Weekly Class Report (Inactive Courses)</li>
<li>Grades</li>
<li>Grades (Old System)</li>
<!-- <li>Program Totals</li> -->
<!-- <li>IMS Action</li> -->
<!-- <li>Exited Needs Action</li> -->
</ul>
</li>
<li class="has-dropdown">
Reporting
<ul class="dropdown">
<li>New Reg CSV for</li>
<li>New Reg CSV for</li>
<li>Active - No</li>
<li>Action</li>
<li>Exit 3-Month Follow-up</li>
<li>Exit 6-Month Follow-up</li>
<li>Exit 12-Month Follow-up</li>
</ul>
</li>
<li class="has-dropdown">
Counsellor
<ul class="dropdown">
<li>100 Day No Attendance</li>
<li>Active - No Classes</li>
<!-- <li>Pause 3-Month Follow-up</li> -->
<!-- <li>All Paused Students</li> -->
</ul>
</li>
<li class="has-dropdown">
DUP
<ul class="dropdown">
<li>Active - No</li>
<li>Banner Action</li>
<li>Exit 3-Month Follow-up</li>
<li>Exit 6-Month Follow-up</li>
<li>Exit 12-Month Follow-up</li>
<li>100 Day No Attendance</li>
<li>Active - No Classes</li>
<!-- <li>Pause 3-Month Follow-up</li> -->
<!-- <li>All Paused Students</li> -->
<!-- <li>Exited Needs Action</li> -->
</ul>
</li>
</ul>
</li>
<li class="has-dropdown">
Account
<ul class="dropdown">
<!-- <li class="active">Right Button Active</li> -->
<li>Request Access</li>
<li>Report Bugs</li>
<li>Login</li>
<li>Edit Your Account</li>
<li>Logout</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 what I'm wondering is: Desktop works perfectly. When I shrink to mobile screen size, perform a search, the search bar now takes over the entire menu and won't show the hamburger menu as it's supposed to. Can anyone suggest a fix? Thanks so much in advance!