title: Why w3css side nav bar is not working in Asp.net Master page?
body: <p>I have a master page. I created side nav bar using w3.css file. It's working in when window is wider that <strong>992px</strong>. when I reduce the windows into small window like tab size, <strong>Collapsible Responsive Side Navigation</strong> is not working. It's reloading the complete page.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;    
      &lt;link href="css/w3.css" rel="stylesheet" /&gt;
      &lt;link href="css/jquery-ui.css" rel="stylesheet" /&gt;
  
      &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;
  
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="form1" runat="server"&gt;
              &lt;div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar"&gt;
              &lt;button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()"&gt;Close &amp;times;&lt;/button&gt;
              &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 1&lt;/a&gt;
              &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 2&lt;/a&gt;
              &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 3&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="w3-main" style="margin-left: 200px"&gt;
              &lt;div class="w3-teal"&gt;
                  &lt;button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()"&gt;&amp;#9776;&lt;/button&gt;
                  &lt;div class="w3-container"&gt;
                      &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
                      &lt;/asp:ContentPlaceHolder&gt;
                      &lt;%--&lt;h1&gt;My Page&lt;/h1&gt;--%&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
              function w3_open() {
                  document.getElementById("mySidebar").style.display = "block";
              }
              function w3_close() {
                  document.getElementById("mySidebar").style.display = "none";
  
              }
          &lt;/script&gt;
      &lt;/form&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>