title: Why isn't the toggle button my responsive WordPress nav working?
body: <p>I've implemented a responsive navigation on a custom WordPress 4.x build I am working on. When I test the nav on its own in a regular HTML doc, it works fine. On the WordPress site, however, it doesn't work. The toggle button that displays the nav on the mobile isn't toggling.</p>
  
  <p>Here's a jsfiddle of the working HTML version: <a href="http://jsfiddle.net/86jy78q0/" rel="nofollow">http://jsfiddle.net/86jy78q0/</a></p>
  
  <p>Here is the site: <a href="http://pow.digitaldemo.net/" rel="nofollow">http://pow.digitaldemo.net/</a></p>
  
  <p>Here's the HTML structure of my menu:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    /* Top Navigation */
      .nav {
        max-width: 100%;
        min-width: 535px;
        float: right;
      }
      /*Strip the ul of padding and list styling*/
      .nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        background: #ffffff;
        position: absolute;
      }
      /*Create a horizontal list with spacing*/
      .nav li {
        display: inline-block;
        float: left;
      }
      /*Style for menu links*/
      .nav li a {
        padding: 0 15px;
        font-family: "Conv_GothamMedium", helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
        color: #000000;
        background: #ffffff;
        display: block;
        height: 20px;
        text-align: center;
        line-height: 20px;
        text-transform: uppercase;
      }
      /*Hover state for top level links*/
      .nav li:hover a {
        background: #eeeeee;
      }
      /*Style for dropdown links*/
      .nav li:hover ul.sub-menu a {
        background: #ffffff;
        color: #000000;
        height: 24px;
        line-height: 24px;
      }
      /*Hover state for dropdown links*/
      .nav li:hover ul.sub-menu a:hover {
        background: #eeeeee;
      }
      /*Hide dropdown links until they are needed*/
      .nav li ul {
        display: none;
      }
      /*Make dropdown links vertical*/
      .nav li ul.sub-menu li {
        display: block;
        float: none;
      }
      /*Prevent text wrapping*/
      .nav li ul.sub-menu li a {
        width: auto;
        min-width: 100px;
        padding: 0 20px;
        background: #eeeeee;
        border-top: 1px solid #d1d1d1;
      }
      /*Display the dropdown on hover*/
      .nav ul li a:hover + .sub-menu,
      .sub-menu:hover {
        display: block;
      }
      /*Style 'show menu' label button and hide it by default*/
      .show-menu {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-decoration: none;
        color: #000000;
        background: #eeeeee;
        border-radius: 4px;
        border: 1px solid #cccccc;
        text-align: center;
        padding: 10px 0;
        display: none;
      }
      /*Hide checkbox*/
      input[type=checkbox] {
        display: none;
      }
      /*Show menu when invisible checkbox is checked*/
      input[type=checkbox]:checked ~ .menu {
        display: block;
      }
      @media (max-width: 820px) {
        /*Make dropdown links appear inline*/
        div.nav {
          min-width: 100%
        }
        .nav ul {
          position: static;
          display: none;
        }
        /*Create vertical spacing*/
        .nav li {
          margin-bottom: 1px;
        }
        /*Make all menu links full width*/
        .nav ul li,
        li a {
          width: 100%;
        }
        /*Display 'show menu' link*/
        .show-menu {
          display: block;
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
    &lt;label for="show-menu" class="show-menu"&gt;Show Menu&lt;/label&gt;
    &lt;input type="checkbox" id="show-menu" role="button"&gt;
    &lt;div class="menu-top-navigation-container"&gt;
      &lt;ul id="menu-top-navigation" class="menu"&gt;
        &lt;li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-7"&gt;&lt;a href="http://pow.digitaldemo.net/"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"&gt;&lt;a href="http://pow.digitaldemo.net/about-us/"&gt;About Us&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-12" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-12"&gt;&lt;a href="http://pow.digitaldemo.net/category/products/"&gt;Products&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
            &lt;li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"&gt;&lt;a href="http://pow.digitaldemo.net/category/products/subcat-1/"&gt;Subcat 1&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"&gt;&lt;a href="http://pow.digitaldemo.net/retailers/"&gt;Retailers&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"&gt;&lt;a href="http://pow.digitaldemo.net/press/"&gt;Press&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"&gt;&lt;a href="http://pow.digitaldemo.net/contact-us/"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can't for the life of me figure out why the mobile menu isn't toggling.</p>
  
  <p>Any help is appreciated!</p>
  
  <p>Best,</p>
  
  <p>Cynthia</p>