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!
Comments
Post a Comment