Button toggle-topbar not working in Foundation - zurb-foundation

Why Menu button not workig?
He does not react to clicks.
JS errors in the browser console is not.
My code:
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>GamingTop</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"><ul class="left"><li>Рейтинги</li><li>Игры</li><li>О нас</li></ul>
<ul class="right">
<li class="has-dropdown not-click">
guyasyou#gmail.com
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li>
<li>Профиль</li>
<li>Мои сервера</li>
<li class="divider"></li>
<li>Выйти</li>
</ul>
</li>
</ul>
</section>
Included JS:
<script type="text/javascript" src="/testtop/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/testtop/js/foundation.min.js"></script>

This can be caused by the version of your jQuery. Try to use the latest version and don't forget to close the nav tag.
Its okay with this code :
Header :
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
Code :
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>GamingTop</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"><ul class="left"><li>Рейтинги</li><li>Игры</li><li>О нас</li></ul>
<ul class="right">
<li class="has-dropdown not-click">
guyasyou#gmail.com
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li>
<li>Профиль</li>
<li>Мои сервера</li>
<li class="divider"></li>
<li>Выйти</li>
</ul>
</li>
</ul>
</section>
</nav>
Before closing your body tag :
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<script>
$(document).foundation();
</script>

Related

want to implement owl carousel but but but

I am trying to create a website using django and bootstrap. I am extending base.html into index.html. I have implemented navbar(from bootstrap) in base.html and want to implement owl carousel in index.html. Both base.html and index.html are in templates folder of my project. I tried placing css and js files like owl.carousel etc in
<!-- THIS IS base.html-->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/owl.carousel.css">
<link rel="stylesheet" href="/static/css/owl.theme.green.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/owl.carousel.min.js"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
templates folder,static folder, created separate folder but nothing worked. Tried removing and adding forward slash/ in path every possible way that i know of
<!-- THIS IS index.html-->
{% extends 'base.html' %}
{% block title %}
Home
{% endblock title %}
{% block body %}
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
{% endblock body %}
I AM GETTING FOLLOWING ERROR SEEN IN CONSOLE AFTER PRESSING F12
[1]: https://i.stack.imgur.com/KgD7n.png
jquery-3.5.1.slim.min.js:2 jQuery.Deferred exception: $(...).owlCarousel is not a function TypeError: $(...).owlCarousel is not a function
at HTMLDocument.<anonymous> (http://127.0.0.1:8000/:126:26)
at e (https://code.jquery.com/jquery-3.5.1.slim.min.js:2:30211)
at t (https://code.jquery.com/jquery-3.5.1.slim.min.js:2:30513) undefined
E.Deferred.exceptionHook # jquery-3.5.1.slim.min.js:2
jquery-3.5.1.slim.min.js:2 Uncaught TypeError: $(...).owlCarousel is not a function
at HTMLDocument.<anonymous> ((index):126)
at e (jquery-3.5.1.slim.min.js:2)
at t (jquery-3.5.1.slim.min.js:2)
:8000/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Add owl.carousel.min.js file in your home page and before the file in which you are using add the following code:
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
--
$("#owl-demo").owlCarousel({
navigation : true
});
Try this way,the recommended way in Django for loading static files by using this way
{% load static %}
<!-- THIS IS base.html-->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.green.min.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
all other code write same I'm not compile the code just tell you if you feel any problem feel free to ask
As I am locally adding Javascript files
i don't need add them again just before body tag ends. So i removed javascript files added at the end of body tag and it worked perfectly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/owl.carousel.css">
<link rel="stylesheet" href="/static/css/owl.theme.green.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/owl.carousel.min.js"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
https://i.stack.imgur.com/KgD7n.png
This error comes when you not initialize the owl carousel.
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items: 4, // no. of items
nav: true, // if you want navigation arrows make it true otherwise false
dots: true // if you want pagination dots make it true otherwise false
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>

How do I using local bootstrap.min.css(version 4.0) work with nav nav-tabs class?

The following code was normally show bootstrap nav & nav-tabs
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script-->
<div>
<ul class="nav nav-tabs">
<li class="active settingshead">1</li>
<li class="settingshead">2</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="first">
<div class="namedesig">
<h4>Dr. Jane Doe</h4>
<p>PhD in Applied Physics</p>
</div>
</div>
<div class="tab-pane" id="second">
<div class="namedesig">
<h4>Dr. Martin</h4>
<p>PhD in Applied Chemistry</p>
</div>
</div>
</div>
But I want to using Local css/bootstrap.min.css instead of https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
<link rel="stylesheet" href="css/bootstrap.min.css">
The result is the nav & nav-tabs cannot show normally.
How can I using the local file of bootstrap.min.css and let the nav and nav-tabs normally display?
The bootstrap cannot show with nav and nav-tabs, because I using local file Bootstrap 4.0 but I writing Bootstrap 3.0 Code.
The folloing code is Bootstrap 3.0 css, so why using online link was normally display.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
Bootstrap 3.0 nav & nav-tabs Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div>
<ul class="nav nav-tabs">
<li class="active settingshead">1</li>
<li class="settingshead">2</li>
</ul>
</div>
I just changed to Bootstrap 4.0 nav & nav-tabs code, everything was normally:
<link rel="stylesheet" href="css/bootstrap.min.css">
<div>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#first" data-toggle="tab">1</a></li>
<li class="nav-item"><a class="nav-link" href="#second" data-toggle="tab">2</a></li>
</ul>
</div>

Dropdown menu in top bar closes on mousedown before firing link

I have a top bar that contains a dropdown menu with links for the current user's account (e.g. Dashboard, Sign out, etc). Each menu item wraps a link that points to a relative URL.
Opening the menu works fine, but as soon as I click on an item, the menu closes and nothing happens.
I've looked for click and mousedown event handlers, but can't find anything that looks like it would be causing this.
Anyone have ideas about this?
Here's the relevant HTML code:
<div class="contain-to-grid nav-wrapper">
<nav data-topbar="data-topbar" role="navigation" class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Site name</h1>
</li>
</ul>
<section data-hook="user-info" class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
username
<ul class="dropdown">
<li>Dashboard</li>
<li>Sign out</li>
</ul>
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</nav>
</div>
And its fiddle: https://jsfiddle.net/a3qrhg5a/
You just probably forgot to include jQuery and initialize Foundation JS
For example:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script>
$(document).foundation();
</script>
And here is your fiddle. Fixed:
https://jsfiddle.net/bartholomej/nxgjqtw4/5/

Search Box Hides Links

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!

Foundation navigation

I'm having problems with Zurb's foundation navigation (I'm new to this and I'm having a steep learning curve and I've hit a wall)
I would like to do a couple of things:
Have the "menu icon" on the left hand side when the topbar is being toggled.
I would like to have three sections when the topbar is being toggled (Title/Middle/Menu)
Any ideas or help would be greatly appreciated!
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><h1>Title</h1></li>
<li class="toggle-topbar menu-icon"><span>MENU</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li></li>
<li class="divider"></li>
<li class="has-dropdown">
<ul class="dropdown">
<li class="divider"></li>
<li class="divider"></li>
<li class="divider"></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</section>
Try with this code :
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Menu
<ul class="dropdown">
<li>First link in dropdown</li>
<li>Second link in dropdown</li>
</ul>
</li>
</ul>
</section>
</nav>
Go on : http://foundation.zurb.com/docs/components/topbar.html#