title: jQuery Function to bring in "offcanvas" slide-in menu is not working
body: <p>I have tried and searched the internet dry without any solution to my problem. I have created an  list in which I modified to be located off the main screen as a slide-in menu using transform: translate (-100%). When the main navbar collapses into the mobile button, I intend to assign a jQuery function to the button in order to slide-in the offcanvas menu. However, the button does not respond no matter what and I need some aid. Any help is greatly appreciated!</p>
  
  <pre><code>    /..The main navbar../
      &lt;nav class="main-navigation" role="navigation"&gt;
          &lt;ul&gt;
              &lt;li class="products1"&gt;&lt;a href="#2"&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li class="store1"&gt;&lt;a href="#3"&gt;Store&lt;/a&gt;&lt;/li&gt;
              &lt;li class="about1"&gt;&lt;a href="#4"&gt;About Us&lt;/a&gt;&lt;/li&gt;
              &lt;li class="discover1"&gt;&lt;a href="#5"&gt;Discover&lt;/a&gt;&lt;/li&gt;
              &lt;li class="support1"&gt;&lt;a href="#6"&gt;Support&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;div class="navbar navbar-default navbar-static-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  /..The button that dosen't work../
                  &lt;button class="navbar-toggle pro-toggle pull-left"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
                  /..The menu that I want to slide in but dosen't work../
                  &lt;div class="collapse navbar-collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="products"&gt;&lt;a href="#2"&gt;Products&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="store"&gt;&lt;a href="#3"&gt;Store&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="about"&gt;&lt;a href="#4"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="discover"&gt;&lt;a href="#5"&gt;Discover&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="support"&gt;&lt;a href="#6"&gt;Support&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  /..The main CSS for the slide-in menu../
  
  &lt;style&gt;
  .main-navigation {
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: fixed;
      text-align: center;
      text-decoration: none;
      background-color: white;
      transform: translateX(-100%);
      transition: transform 1s ease;
  }
  
  .main-navigation.open {
      transform: translateX(0);
  }
  &lt;/style&gt;
  
  /..The jQuery function that is supposed to slide-in the menu../
  
  &lt;script&gt;
      $(document).ready(function() {
          $('.pro-toggle').on('click', function(){
              ${'.main-navigation').toggleClass('open');
          });
      });
  &lt;/script&gt;
  </code></pre>