I was just trying to test out this responsive nav bar, but it seems that the javascript is not connecting. I put the script tag at the bottom of the body as I’ve heard that it is the best place to put it, yet it fails to work.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnii</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="#!">Omnii</a>
</div>
<nav>
<div class="nav-mobile"><a id="navbar-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a href="#!">Home</a>
</li>
<li>
<a href="#!">About</a>
</li>
<li>
<a href="#!">Devs</a>
</li>
<li>
<a href="#!">Docs</a>
</li>
<li>
<a href="#!">Sign in</a>
</li>
</ul>
</nav>
</div>
</section>
<section>
<center><h1>Reality, enhanced</h1></center>
</section>
<script src="index.js"></script>
</body>
</html>
index.js
(function ($) {
$(function () {
// open and close nav
$("#navbar-toggle").click(function () {
$("nav ul").slideToggle();
});
// Hamburger toggle
$("#navbar-toggle").on("click", function () {
this.classList.toggle("active");
});
});
})(jQuery);
What do I do?
>Solution :
I can see you are using the dollar($) sign which means jQuery needs to be included first before add the index.js file.
NB: The order should be jQuery first then follows by your custom index.js file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>