Trying to position the hamburger icon for a responsive menu

For the items to appear "below" the hamburger icon, it helps to have both the icon and the menu items inside the same div.

I changed the icon to be a bit more up ↑ in your html.

I also modified the way your header Bar was working abit. Mostly by removing the header bar width of 100% (which messes things up if you give it padding, because then its 100% of screen + padding, which makes the header go outside the page.)

And added left:0; and right:0; which makes it so it always takes up the full width of the screen.

Using the css feature called "flexbox" i made it so there always is space between the logo and the menu items. And using Flexbox you can also easly make things go "beneath each other" using flex-direction:column;

(A good reference to understand what all these flexbox things do is this website https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

I also added a small javascript snippet, that makes it so you can click on your hamburger to toggle the menu. By toggleing a class called "open" that with css we check for to know if the menu should be visible.

Please check the below attached scripts, i have added /modification/ to where i have modified your code.

Html Code:

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="./index.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
        <!-- Added a small script to toggle a class using javascript -->
        <script>
            function toggleMenu(localThis){
                localThis.parentNode.classList.toggle('open');
            }
        </script>
    </head>
    <body>
        <div class="header_nav">
            <div class="logo">
                <a href="index.html">
                    <!-- <img src="images/logo_v3.png"/> -->
                    <!-- temporary logo -->
                    <svg width="50" height="20">
                        <rect width="50" height="20" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
                      </svg>
                </a>
            </div>

            <div class="menu" id="myMenunav">
                <!-- Moved hamburger icon to be over here -->
                <div class="hamburger-toggle" style="display:none;">
                    <a href="javascript:void(0);" onclick="toggleMenu(this)"> <i class="fa-solid fa-burger"></i></a>
                </li>
                </div>
                <ul>
                    <li><a href="about.html">ABOUT </a></li>
                    <li><a href="index.html#work">WORK </a></li>
                    <li><a href="Resume.pdf" target="_blank">RESUME </a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

Css code:

/*  ----------------- NAVIGATION ----------------- */
.header_nav {
    display: inline-table;
    list-style: none;
    background-color: #FFFEF9F7;
    height: 75px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.header_nav ul,
.header_nav a {
    list-style: none;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    font-size: 28px;
    text-transform: uppercase;
}

ul {
    display: block !important;
    list-style-type: disc !important;
    margin-block-start: 1em !important;
    margin-block-end: 1em !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
    padding-inline-start: 40px !important;
}

.header_nav a:hover {
    color: #78F51D;
}

.logo {
    display: inline-block;
    padding-left: 5%;
    padding-top: 25px;
}

.logo img {
    max-height: 45px;
}

.menu {
    display: inline-block;
    float: right;
    padding-right: 5%;
    padding-top: 2px;
}

.menu li {
    padding-left: 20px;
}

.menu .icon {
    display: none;
}

li .icon {
    padding-right: 0px;
}

li {
    padding-left: 12px;
    display: inline-block;
}

/* Modifications */
body {
    margin: 0;
}

.logo {
    padding: 0px;
    display: flex;
}

.menu {
    padding: 0px;
    float: unset;
    display: flex;
}

.menu ul {
    margin: 0px !important;
    padding: 0px !important;
    list-style-type: none !important;
}

.menu ul li {
    /* padding: 0px; */
}

.header_nav {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    width: unset;
    left: 0;
    right: 0;
}

/*  ----------------- MEDIA QUERIES ----------------- */
@media only screen and (max-width: 640px) {
    /* .menu ul li:not(.icon) { display: none; } */

    /* .menu ul li.icon {
        float: right;
        display: block;
        right: 25px;
        top: 25px;
    }

    .menu.responsive {
        background-color: #FFFEF9;
        position: relative;
    }

    .menu.responsive .icon {
        position: absolute;
        right: 25px;
        top: 25px;
        z-index: -1;
    }

    .menu.responsive ul li:not(.icon) {
        float: none;
        display: block;
        top: 100px;
        padding-right: 1%;
        text-align: right;
    } */

    /* Modifications */

    .menu {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .hamburger-toggle {
        display: flex !important;
    }

    ul {
        display: none !important;
    }

    ul li {
        padding-top: 20px;
    }

    .hamburger-toggle.open + ul {
        display: flex !important;
        flex-direction: column;
    }
}