Html - how to add Hamburger functionality to my personal portfolio website

AdityaBasak
March 6, 2024
188 views
1 vote
2 Answers

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?

Answers

there’s a mistake in your HTML. You added the class nav-links to the ul 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.

const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('nav ul.nav-links');
const socialLinks = document.querySelector('.social');

menuToggle.addEventListener('click', () => {
    document.body.classList.toggle('menu-open');
});

    .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 {
        position: absolute;
        top: 0;
        display: flex;
    }

<div class="menu-toggle">
    <div class="hamburger">Open</div>
</div>

<ul class="nav-links">
    <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>

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.

const menuToggle = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const socialLinks = document.querySelector('.social');
// select ul
let ul = document.querySelector('.open')

// when click on hamburger icon ul is show
menuToggle.addEventListener('click', () => {
    ul.classList.toggle('open')
});

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;
}

.logo > span > a > img {
  width: 60px;
  height: 60px;
}

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);
}

.menu-toggle {
  display: none;
}

@media screen and (max-width: 570px) {
    /* add logo */
  .logo > span > a > img {
    display: block;
    width: 60px;
    height: 60px;
  }
  /* none display ul */
  header > nav ul {
    display: none;
  }
  .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;
  }
  /* add ul style */
  /* when click on hamburger icon this class is show or hide */
  .open {
    display: none;
  }

  .menu-open .nav-links {
    display: flex;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
<!-- main menu for desktop -->
        <nav>

            <div class="logo">
                <span><a href="#home"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-Logo.svg"
                            alt=""></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>
        </nav>
        <!-- social media icon -->
        <div class="social">
            <a href="https://github.com/aditya9-2" target="_blank"> <img
                    src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="github"
                    width="25" height="25"></a>
            <a href="https://linkedin.com/in/aadityabasak20" target="_blank"> <img
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/LinkedIn_icon.svg/2048px-LinkedIn_icon.svg.png"
                    alt="LinkedIn" width="25" height="25"></a>
            <a href=" https://x.com/aadityaa027?t=QolEyjPnS_MgghSikQeP0g&s=08" target="_blank"> <img
                    src="https://branditechture.agency/brand-logos/wp-content/uploads/wpdm-cache/Twitter-X-Rounded-Icon-900x0.png"
                    alt="x" width="25" height="25"></a>
        </div>

<!-- start hamburger menu -->
        <div class="logo">
            <span><a href="#home">Activity</a></span>
        </div>

        <div class="menu-toggle">
            <div class="hamburger">=</div>
            <!-- add class for ul -->
            <ul class="open">
                <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>
    </header>
    <!-- js link -->
    <script src="script.js"></script>
</body>

</html>

I hope the comments written in the codes are helpful to you.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to add Hamburger functionality to my personal portfolio website

Answers