How to change navigation bar to a hamburger menu in mobile view using HTML and CSS?

Question

How can I change the navbar in desktop webpage to a hamburger menu in mobile webpage using media query in CSS and HTML.

Thanking in Advance for the help.

What should I do in the Media Query part?

Here is desktop webpage code:

HTML

<div id="menu">
            <a href="#" id="logo">Hello</a>
            <ul>
                <li id="list_item"><a class="active" href="index.html">About</a></li>
                <li id="list_item"><a href="#skills">Skills</a></li>
                <li id="list_item"><a href="#education">Education</a></li>
                <li id="list_item"><a href="#contact">Contact</a></li>
                <li id="list_item"><a href="Assets/Dream CV.pdf" target="_blank">Download CV</a></li>
                <li id="list_item"><a href="#"><i class="fa-solid fa-ellipsis-vertical"></i></a></li>
            </ul>
        </div>

CSS

#menu{
    width: 75%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    background: #FFFFFF;
    position: fixed;
    top: 0px;
    box-shadow: 0 1px 3px 0 rgba(78, 77, 77, 0.6)
}
#logo{
    text-decoration: none;
    font-weight: 700;
    font-size: 42px;
    color: #2E2E2E;
    padding: 0px 30px;
    font-family: 'Libre Barcode 128 Text', cursive;
}
#menu ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
}
#list_item{
    
    padding: 0px 15px;
    position: relative;
}

Answer 1

Something like this:

/* Default styles for desktop */
#menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Media query for screens smaller than 600px */
@media screen and (max-width: 600px) {
    /* Change the display to block for the menu */
    #menu {
        display: block;
    }
    /* Hide the menu items */
    #menu ul {
        display: none;
    }
    /* Add a hamburger icon */
    #menu #hamburger {
        display: block;
        cursor: pointer;
    }
}

This media query will target screens smaller than 600px (you can adjust this value to your preference), and will change the display of the menu to block, hide the menu items, and add a hamburger icon.

For the hamburger icon, you can use an HTML tag and a CSS class to style it.

<i class="fa-solid fa-ellipsis-vertical"></i>

/* Hamburger icon */
.fa-ellipsis-vertical{
    display: none;
    font-size: 30px;
    color: #2E2E2E;
}