title: Wordpress change menu from opening on hover to click
body: <p>I have a site <a href="http://themerkle.com" rel="nofollow">http://themerkle.com</a> and I have been trying to change the stick hamburger menu on the top left from opening up on hover to opening up when someone click it. Reason being, on a smartphone the menu stays open because hover is not meant to support touchscreen devices.</p>
  
  <p>I tried looking for the css part which enables the hovering but even after disabling most of the css lines for the top-menu like</p>
  
  <pre><code>#top-menu-selector:hover{color:#BD2A33;-moz-box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.12);-webkit-box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 12);box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.12);}
      #top-menu ul li:hover ul, 
      #top-menu ul li:hover ul li a, 
  </code></pre>
  
  <p>the menu still appears to open on mouse hover. I also tried disabling javascript but the menu still opens. I narrowed it down to the following function which actually creates the menu in sticky.php:</p>
  
  <pre><code>&lt;?php //title attribute gets in the way - remove it
  $menu = wp_nav_menu( array( 'theme_location' =&gt; 'top-menu', 'container' =&gt; false, 'fallback_cb' =&gt; 'fallback_pages', 'echo' =&gt; false ) );
  $menu = preg_replace('/title=\"(.*?)\"/','',$menu);
  echo $menu;
  ?&gt;
  </code></pre>
  
  <p>I am not sure where i can change the css or add the required js to the menu to open on mouse click, any help is appreciated.</p>
  
  <p>UPDATE:</p>
  
  <p>After further investigating I found that by removing the below element the menu stops expanding on hover.</p>
  
  <pre><code>&lt;ul class="sf-js-enabled sf-shadow"&gt;
  </code></pre>
  
  <p>Now I need to figure out how to enable expansion on click.</p>
  
  <p>UPDATE 2: </p>
  
  <p>Fixed by adding an onclick function to the top menu as such:</p>
  
  <pre><code>&lt;div id="top-menu" onclick="show_hide_menu();"&gt;  
  </code></pre>
  
  <p>Then adding the following script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var clicked = false;
  function show_hide_menu()
  {
      if(clicked == false){
          document.getElementById("menu-main").style.display = "none";
          clicked = true;
      }else if (clicked == true){
          document.getElementById("menu-main").style.display = "block";
          clicked = false;
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The solution does not require messing with the hover implementation and simply adds an option to close the menu when you click it. It seems to also override the hover event which is good.</p>