سلام. وقتتون بخیر
کد جاوااسکریپت رو به این شکل تغییر بدید و اگر مشکل حل نشد ممنون می‌شم پروژتون رو به صورت کامل زیپ کنید و قرار بدید، یا در کدپن بارگزاری کنید و لینکش رو بدید تا بررسی کنیم.

document.addEventListener('DOMContentLoaded', function () {
  function myFunc() {
    var x = document.getElementById("my_nav");
    if (x.className === "nav") {
      x.className += " responsive";
    }
  }
  // اگر این تابع رو به دکمه همبرگر متصل کنید:
  document.getElementById('hamburger_icon').addEventListener('click', myFunc);
});

سلام روز بخیر

نه درست نشد و من لینک رو براتون ارسال کردم ولی از اونجایی که هر بخش رو در فایل‌های جدا کد نوشتم فقط این قسمت رو براتون ارسال کردم

https://codepen.io/Mohadese-Esfandiari/pen/OPJXKPR

سلام. چند مشکل که وجود داره:
1. id که برای nav تعریف کردید my_nav هست، در حالی که در جاوااسکریپت دارید id اشتباهی رو صدا می‌زنید (نوشتید my-nav)
2. عنصر <a> که شامل آیکون همبرگری هست، هیچ idای نداره ولی در جاوااسکریپت دارید document.getElementById("hamburger_icon") رو صدا می‌زنید.
برای حل این مشکل، به این <a> یک id="hamburger_icon" اضافه کنید:

<a href="javascript:void(0);" class="icon" id="hamburger_icon" onclick="myFunc()">

3. در <a>یی که برای همبرگر گذاشتید، onclick="myFunc()" ; دارید که ; اضافی بعد از " مشکل ایجاد می‌کنه.

همچنین، وقتی از addEventListener استفاده می‌کنید، دیگه نیازی به onclick نیست.

به این صورت اصلاح کنید:

<a href="javascript:void(0);" class="icon" id="hamburger_icon">
 <i class="fa-solid fa-bars"></i>
</a>

و در جاوااسکریپت:

document.addEventListener("DOMContentLoaded", function () {
  function myFunc() {
    var x = document.getElementById("my_nav");
    if (x.classList.contains("responsive")) {
      x.classList.remove("responsive");
    } else {
      x.classList.add("responsive");
    }
  }
  document.getElementById("hamburger_icon").addEventListener("click", myFunc);
});