Html – Make a nav with dropdown menu responsive (should be viewed in smaller screens)

var dropdownContent = document.getElementById("myDropdown");
var isOpen = false;

function toggleDropdown() {
  if (!isOpen) {
    fadeIn(dropdownContent);
  } else {
    fadeOut(dropdownContent);
  }
}

function fadeIn(element) {
  var opacity = 0;
  element.style.display = "block";
  var fadeInInterval = setInterval(function() {
    if (opacity < 1) {
      opacity += 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(fadeInInterval);
    }
  }, 30);
  isOpen = true;
}

function fadeOut(element) {
  var opacity = 1;
  var fadeOutInterval = setInterval(function() {
    if (opacity > 0) {
      opacity -= 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(fadeOutInterval);
      element.style.display = "none";
    }
  }, 30);
  isOpen = false;
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    fadeOut(dropdownContent);
  }
}

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

ul {
  list-style: none;
}

.header {
  padding: 20px 50px;
  gap: 225px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px -3px 21px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
  /*position: fixed;*/ /*not needed*/
  z-index: 1;
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo img {
  width: 120px;
}

.header .main_menu {
  display: flex;
}

.header .main_menu li a {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  color: black;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 25px;
  margin: 0px 3px;
}

.header .main_menu li {
  position: relative;
}

#home {
  background-color: #CD285B;
  color: #f1f1f1;
  border-radius: 5px;
}

.main_menu li:hover>a {
  background-color: #FFD7E3;
  border-radius: 5px;
}

.dropbtn {
  display: flex;
  align-items: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  background-color: #CD285B;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  height: 100%;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropbtn .fa {
  font-size: 12px;
}

.dropbtn .fa {
  padding-left: 10px;
  margin-left: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-top: 25px;
  gap: 10px;
  right: -27%;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 182px 73px rgba(205, 40, 91, 0.01), 0px 103px 62px rgba(205, 40, 91, 0.05), 0px 46px 46px rgba(205, 40, 91, 0.09), 0px 11px 25px rgba(205, 40, 91, 0.1), 0px 0px 0px rgba(205, 40, 91, 0.1);
  border-radius: 10px;
  width: 235px;
  z-index: 1;
  align-items: center;
}

.dropdown-content a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 20px;
  margin: 6px;
  color: black;
  font-size: 16px;
  color: #303030;
  text-decoration: none;
}

.dropdown a:hover {
  background-color: #f1f1f1;
  border: 1px solid rgba(219, 0, 84, 0.588);
  margin: 5px;
  border-radius: 10px;
}

.dropdown:hover .dropbtn {
  background-color: #cd285cdc;
  transition: all .3s ease-in-out;
}

.dropdown-content .fa-solid {
  color: #303030;
  font-size: 16px;
  padding-right: 10px;
}

.show {
  display: block;
}


/*new code:*/

#menu__toggle {
  visibility: hidden;
}


/*new responsive code from here*/

@media (max-width: 1320px) {
  #menu__toggle {
    opacity: 0;
  }
  #menu__toggle:checked+.menu__btn>span {
    transform: rotate(45deg);
  }
  #menu__toggle:checked+.menu__btn>span::before {
    top: 0;
    transform: rotate(0deg);
  }
  #menu__toggle:checked+.menu__btn>span::after {
    top: 0;
    transform: rotate(90deg);
  }
  #menu__toggle:checked~.menu__box {
    left: 0 !important;
  }
  .menu__btn {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
    padding-top: 10px;
  }
  .menu__btn>span,
  .menu__btn>span::before,
  .menu__btn>span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
  }
  .menu__btn>span::before {
    content: '';
    top: -8px;
  }
  .menu__btn>span::after {
    content: '';
    top: 8px;
  }
  .menu__box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
  }
  .menu__item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
  }
  .menu__item:hover {
    background-color: #CFD8DC;
  }
  .header .main_menu {
    display: inline-block;
  }
}

<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>Sample Business</title>
  <link rel="logo icon" href="framelogoicon.png" />
  <link rel="stylesheet" href="FrameDevG.css">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://kit.fontawesome.com/afde9d8d8e.js" crossorigin="anonymous"></script>
</head>

<body class="prevent-select">
  <header class="header">
    <div class="container">
      <div class="navbar">
        <div class="logo">
          <a href="">
            <img src="framelogo1.png" alt="Business Sample Logo">
          </a>
        </div>
        <nav>

          <!-- new HTML code from here -->
          <div class="hamburger-menu">
            <input id="menu__toggle" type="checkbox" />
            <label class="menu__btn" for="menu__toggle">
      <span></span>
    </label>
            <ul class="main_menu menu__box">
              <li><a href="index.html" class="menu__item" id="home">Home</a></li>
              <li><a href="FrameDevG.html" class="menu__item" id="gallery">Gallery</a></li>
              <li><a href="FrameDevAbout.html" class="menu__item" id="about-us">About Us</a></li>
              <div class="dropdown">
                <button class="dropbtn" onclick="toggleDropdown()">Book Now<i class="fa fa-sort-desc" onclick="showMenu()"></i> </button>
                <div class="dropdown-content" id="myDropdown">
                  <a href="#bookframe"><i class="fa-solid fa-music"></i>Music Video</a>
                  <a href="#bookframe"><i class="fa-solid fa-camera"></i>Photography</a>
                  <a href="#bookframe"><i class="fa-solid fa-globe"></i>Website Development</a>
                  <a href="#bookframe"><i class="fa-solid fa-palette"></i>Graphic Design</a>
                  <a href="#bookframe"><i class="fa-solid fa-clapperboard"></i>Commercial</a>
                  <a href="#bookframe"><i class="fa-solid fa-chart-line"></i>Marketing Content</a>
                </div>
              </div>
            </ul>
          </div>
        </nav>
        <!-- new HTML code until this -->
      </div>
    </div>
  </header>