i want to add a hamburger menu and its functionalities for the navbar of my portfolio. after hitting a mobile point (e.g. 360px)
this is my nav section-
<header>
<nav>
<div class="logo">
<span><a href="#home">Aditya.</a></span>
</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="social">
<a href="https://github.com/aditya9-2" target="_blank"> <img src="assets/github.png" alt="github"
width="25" height="25"></a>
<a href="https://linkedin.com/in/aadityabasak20" target="_blank"> <img src="assets/LinkedIn.png"
alt="LinkedIn" width="25" height="25"></a>
<a href=" https://x.com/aadityaa027?t=QolEyjPnS_MgghSikQeP0g&s=08" target="_blank"> <img
src="assets/x.png" alt="x" width="25" height="25"></a>
</div>
</nav>
</header>
this is my CSS section-
header {
position: sticky;
top: 0;
z-index: 11;
background: var(--background);
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: none;
position: sticky;
margin: 0 15px;
padding: 15px 0;
}
.logo a {
text-decoration: none;
font-size: 30px;
font-weight: bold;
color: white;
font-family: cursive;
cursor: pointer;
}
header>nav ul {
display: flex;
align-items: center;
}
nav ul li {
margin: 0 23px;
list-style: none;
}
nav ul li a {
text-decoration: none;
color: var(--text-color);
font-size: 18px;
transition: all 0.3s ease-out;
}
nav ul li a:hover {
cursor: pointer;
color: var(--text-hover);
transform: scale(1.3);
}
.social {
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
background: none;
}
.social img {
transition: all 0.3s ease-out;
}
.social img:hover {
cursor: pointer;
transform: scale(1.3);
}
i have tried by adding a div for the hamburger-
<div class="logo">
<span><a href="#home">Aditya.</a></span>
</div>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
and added this css lines-
.menu-toggle {
display: none;
}
@media screen and (max-width: 370px) {
.menu-toggle {
display: block;
cursor: pointer;
}
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--background);
padding: 10px 0;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.nav-links li {
margin: 10px 0;
text-align: center;
}
.nav-links a {
color: var(--text-color);
}
.nav-links a:hover {
color: var(--text-hover);
}
.social {
display: none;
}
.menu-open .nav-links {
display: flex;
}
}
JS –
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
const socialLinks = document.querySelector('.social');
menuToggle.addEventListener('click', () => {
document.body.classList.toggle('menu-open');
});
but i did not find where i did mistake. i want if a user click on the hamburger icon then they can use nav links and social icons. like a traditional hamburger.
can anyone help me with the problem i faced?
2
Answers
there’s a mistake in your HTML. You added the class
nav-links
to theul
in your CSS, but in your HTML it doesn’t have this class. Because of this your JavaScript can’t select the element with className "nav-links" as it doesn’t exist in your DOM.In the snippet I have removed the responsive query and added position absolute to the menu item to make the demo function better. Good luck with your site.
It was a bit of a problem with html and how you structure it. In the menu section of the hamburger, you closed your main demon. And the second problem was from your Script page.
You should have said that by clicking the hamburger icon to open its menu on the page (I selled ul and clicked it.)
And in the CSS section I added a few lines to your code, and fixed the problem using Toggle and giving your UL class. I used a ready icon for your hamburger, you can change it to your favorite icon (eg using Font Awsome).
I hope you have noticed well.
I hope the comments written in the codes are helpful to you.