Как добавить функциональность гамбургера на сайт моего личного портфолио ⇐ CSS

[Anonymous]

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-

Aditya.

• About
• Projects
• Skills
• Contact

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-

Aditya.

• About
• Projects
• Skills
• Contact

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?


Источник: https://stackoverflow.com/questions/781 ... io-website