I am trying to implement the Topbar feature of Foundation for my website's navigation. However, all I see is a plain bulleted list with no formatting whatsoever. Currently, I have only included basic external dependencies like jQuery and Foundation in my HTML file. The browser Console shows no errors and confirms that all required files are being successfully loaded. What could be causing the Topbar not to appear?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!-- Page metadata. -->
<meta charset="UTF-8">
<meta name="viewport" />
<title>Coding & Design in INFO250</title>
<!-- Linked CSS files. -->
<link href="css/external/foundation.min.css" />
<link href="css/external/normalize.css" />
<link href="css/app.css" rel="stylesheet" type="text/css" />
<link href="css/media.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="title-area">
<li class="name">
<h1><a href="#">Coding & Design in INFO250</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
</li>
</ul>
<ul class="right">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Section 508</a>
</li>
<li><a href="#">MySQL</a>
</li>
</ul>
</section>
</nav>
<div class="bg-holder splash1">
<div class="container">
<h1>Coding & Design</h1>
<h3>in INFO250</h3>
</div>
</div>
<!-- JavaScript, linked and otherwise. -->
<script src="js/external/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="js/external/fastclick.js" type="text/javascript"></script>
<script src="js/external/foundation.js" type="text/javascript"></script>
<script src="js/external/foundation.topbar.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>