Как заменить переключатель списка классов myFunction

Question

У меня есть это в моем php, которое переключает мое меню и опускает его.

<div class="module widget- 
   handle mobile-toggle right 
   visible-sm visible-xs">
<a 
   id="mobile-nav" href="#">
   <div class="container1" 
      onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
   </div>
</a>

<script>
    function myFunction(x){
    x.classList.toggle
    ('change');}
</script>

Я хотел бы заменить или интегрировать его с этим.

  /* Open when someone clicks 
    on the span element */
  function openNav() {
      document.getElementById("myNav").style.width =
          "100%";
  }
  /* Close when someone 
  clicks on the "x" symbol 
  inside the overlay */
  function closeNav() {
      document.getElementB
      yId("myNav").style.width =
          "0%";
  }

Я не совсем уверен, что это за идентификатор моего элемента, это не MyNav, но может быть collapse, как подробно описано в этом html здесь:

<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
   <a title="Contact" href="url">Contact 
   <ul role="menu" class=" dropdown-menu">

In в любом случае верхняя часть javascript в настоящее время переключает мои панели и опускает мое меню.

В основном проблема в том, что раскрывающийся список выходит за пределы экрана на некоторых устройствах, поэтому он прокручивается, или под ним отображается страница. Я хочу, чтобы он соответствовал экрану без отображения какой-либо страницы и без прокрутки (слишком высоко).