I recently built a website and aimed to ensure it had a responsive design. Following a tutorial on YouTube, I implemented everything exactly as shown in the video. However, I encountered an issue with the hamburger icon not appearing. Can anyone shed some light on why this might be happening? The functionality works perfectly in the tutorial. Check out a snippet of my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nikolinart</title>
<link rel="stylesheet" href="./styles/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">Nikolin<span>art</span></a></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello and welcome to</div>
<div class="text-2">Nikolin<span>art</span></div>
<div class="text-3">My name is Nikolina and I'm a <span>Painter</span></div>
</div>
</div>
</section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore aperiam rem laboriosam corrupti sunt, aspernatur doloremque ipsum molestiae, eveniet debitis vitae tempore ea molestias atque fugiat hic voluptas dignissimos mollitia quasi earum saepe fuga cum. Vero quia blanditiis voluptatum suscipit consequuntur praesentium odit asperiores totam quod, aliquid esse voluptas voluptatem dolorum! Dolor provident, sint repellat ese voluptates facere, dolorem tempora, libero at voluptas repellendus saepe reprehenderit laudantium dicta quas id aliquid corporis. Vitae, perferendis dolores! Explicabo voluptatum officiis vel exercitationem voluptate voluptatem in qui expedita ullam voluptas doloremque modi, ratione iure assumenda nostrum architecto ipsa, minima est corporis sed consequuntur, ipsam corru...
.menu-btn {
color: #fff;
font-size: 23px;
cursor: pointer;
display: none;
}