title: sideNav is not working in material design?
body: <p>I got an error</p>
  
  <blockquote>
    <p>Uncaught TypeError: $(...).sideNav is not a function</p>
  </blockquote>
  
  <p>in my website i am using material design bootstrap 4.but sidenav is not working. I am using Jquery in my website.i have included below script tags.</p>
  
  <pre><code>&lt;header&gt;
  &lt;ul id="slide-out" class="side-nav fixed custom-scrollbar" style="background-color: #29ABE2;width: 100px;border-right: 1px solid #757575;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);"&gt;
  &lt;li&gt;
  
  
  &lt;div class="logo-wrapper waves-effect"&gt;
  
  
  &lt;a href="#"&gt;&lt;img src="img/Asset 17hdpi.png" class="img-fluid flex-center"&gt;&lt;/a&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;/li&gt;
  
  
  &lt;li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover active"&gt;
  
  
  &lt;a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="HOME" id="section_home"&gt;&lt;img src="img/Home_1xhdpi.png" class="img-fluid" style="width: 50%;margin-left: 9px;"&gt;&lt;/a&gt;
  
  
  &lt;/li&gt;
  
  
  &lt;li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover"&gt;
  
  
  &lt;a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="OUR SOLUTIONS" id="section_solutions"&gt;&lt;img src="img/Projects_2mdpi.png" class="img-fluid" style="width: 80%;margin-left: 0px;"&gt;&lt;/a&gt;
  
  
  &lt;/li&gt;
  
  
  &lt;li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover"&gt;
  
  
  &lt;a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="OUR SERVICES" id="section_services"&gt;&lt;img src="img/Services_3xhdpi.png" class="img-fluid" style="width: 60%;margin-left: 9px;"&gt;&lt;/a&gt;
  
  
  &lt;/li&gt;
  
  
  &lt;li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover"&gt;
  
  
  &lt;a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="OUR CLIENTS" id="section_clients"&gt;&lt;img src="img/Store_4xhdpi.png" class="img-fluid" style="width: 43%;margin-left: 12px;"&gt;&lt;/a&gt;
  
  
  &lt;/li&gt;
  
  
  &lt;li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover"&gt;
  
  
  &lt;a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="ABOUT US" id="section_about_us"&gt;&lt;img src="img/Clients_5xhdpi.png" class="img-fluid" style="width: 40%;margin-left: 12px;"&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover"&gt;
  &lt;a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="WORK AT EVONTEX" id="section_work_at"&gt;&lt;img src="img/Solutions_12xhdpi.png" class="img-fluid" style="width: 57%;margin-left: 8px;"&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover"&gt;
  &lt;a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="BLOG" id="blog"&gt;&lt;img src="img/Blog_13xhdpi.png" class="img-fluid" style="width: 50%;margin-left: 9px;"&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover"&gt;
  &lt;a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="CONTACT US" id="section_contact_us"&gt;&lt;img src="img/Contacts_6xhdpi.png" class="img-fluid" style="width: 45%;margin-left: 11px;"&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;nav class="navbar navbar-fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav" style="box-shadow: none;"&gt;
  &lt;div class="float-xs-left"&gt;
  &lt;a data-toggle="slide-out" class="button-collapse"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="breadcrumb-dn mr-auto"&gt;
  &lt;a&gt;
  &lt;img src="img/ELOGO.png" class="flex-center" style="width: 18%;"&gt;
  &lt;/a&gt;
  &lt;span style="border-bottom: 3px solid #1F81AC;display: block;margin-left: 25px;width: 13%;margin-top: 15px;"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;ul class="nav navbar-nav ml-auto flex-row"&gt;
  &lt;li class="nav-item" style="width: 200px;"&gt;
  &lt;button type="button" id="btn_touch" class="btn btn-primary get_in_touch_btn" style="background: #29ABE2;"&gt;GET IN TOUCH&lt;/button&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>and here down the script what am using script to run jquery method for Sidenav</p>
  
  <pre><code> &lt;script type="text/javascript" src="js/jquery-3.1.1.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="js/tether.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="js/mdb.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="https://mdbootstrap.com/live/_MDB/js/customizer.min.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>Below is my Header am using material design bootstrap plugin, open the sidebar click on the .button-collapse button.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('.button-collapse').sideNav();
  var el = document.querySelector('.custom-scrollbar'); 
  Ps.initialize(el); 
  &lt;/script&gt;
  </code></pre>