title: Why does my second function stop the first function toggling the menu display?
body: <p>I couldn't think of a better, more specific, title so apologies if it is too vague. I don't know what the problem with my code is so couldn't be more specific on the question. I welcome someone to give an example of a better title.</p>
  
  <p>I am building a Wordpress website. In it I have a mobile navigation menu bar (entered via a Wordpress function) where when I click on it it shows the menu and when clicked on again it hides it. I also have a second function that when the same menu bar is clicked on it hides the search bar and when I click it again it is supposed to show the search bar (while the menu is hidden). </p>
  
  <p>The problem is that when this second function is present, when the menu is clicked on it shows the menu and hides the search bar, as it should, but on the second click, when it is supposed to hide the menu and show the search bar,  nothing happens. The menu bar stays visible and the search bar stays hidden.</p>
  
  <p>This is for the following site: <a href="http://iga.yohut.ie/" rel="nofollow noreferrer">http://iga.yohut.ie/</a></p>
  
  <p>HTML/PHP</p>
  
  <pre><code>   &lt;div class="primary-nav-wrapper-1"&gt;
               &lt;div class="primary-nav-wrapper"&gt;
          &lt;div class="primary-nav-container"&gt;
              &lt;a href="javascript:void(0)" onclick="toggleNav();          moveSearch();"&gt;
                   &lt;div class="nav-icon"&gt;
                       &lt;div id="burger-icon"&gt;&lt;/div&gt;
                       &lt;div id="burger-icon"&gt;&lt;/div&gt;
                       &lt;div id="burger-icon"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/a&gt;
               &lt;?php wp_nav_menu(
                    array(
                      'theme_location'  =&gt; 'primary',
                      'container'       =&gt; 'nav',
                      'container_class' =&gt; 'primary-nav',
                      'menu_class'      =&gt; 'navbar',
                      'menu_id'         =&gt; 'navbar',
  
                    )
                  ); ?&gt;
  
              &lt;/div&gt; 
  
            &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#search-5 {
  
      display: block;
      width: 80%;
      margin: 0 auto 20px auto;
      position: absolute;
      top: 335px;
      left: 10%;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function toggleNav() {
              var nav = document.getElementById("navbar"); 
              if (!nav.style.display || nav.style.display === "none") {
                  nav.style.display = "block";
              } else {
                  nav.style.display = "none";
              }
  
          };
  
  
  
  function moveSearch() {
      var nav = document.getElementById("navbar"); 
      var search = document.getElementById("search-5");
      if (nav.style.display = "block") {
          search.style.display = "none";
  
      }
  
      else {
          search.style.display ="initial";
  
  
      }
  }
  </code></pre>
  
  <p>When I console.log a response I only get one response when opening the menu but no response when trying to close it.</p>
  
  <p>I only have a basic understanding of Javascript so it's probably a simple mistake.</p>
  
  <p>Could someone help me please?</p>