I am attempting to create a simple hamburger menu using either jQuery or JS, but unfortunately my code is not functioning as expected. I am struggling to identify the issue.
The layout consists of a hamburger icon on the top-left, a logo in the middle, and a profile/basket on the top-right corner.
Currently, I am focusing on getting the navigation list to appear upon clicking the burger icon, after which I can proceed with styling it accordingly. My approach involves utilizing the .hidden class to display the navigation as a block element when the burger icon is clicked.
Below is the provided code:
HTML:
<section class="header-section">
<div class="header-container">
<div class="header-content">
<div class="hamburger-container">
<i id="burger" class="fas fa-bars fa-2x"></i>
</div>
<div class="header-logo-container">
<h2>Logo goes here</h2>
</div>
<div class="header-profile-and-signin">
<i class="fas fa-user-circle fa-2x"></i>
<i class="fas fa-suitcase-rolling fa-2x"></i>
</div>
<ul id="nav">
<li>
<a href="search-page.html" style="text-decoration: none">Holidays</a>
</li>
<li>
<a href="sign-in.html" style="text-decoration: none">Sign In / Register</a>
</li>
</ul>
</div>
</div>
</section>
CSS:
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header-section {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #999;
}
/* Styles for other elements */
#burger {
cursor: pointer;
}
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#burger").click(function() {
$("#nav").toggleClass("hidden");
});
</script>
I would greatly appreciate any assistance. Thank you.