title: bootstrap 4 making dropdown scrollable
body: <p>I have a problem with my drop down menu on smaller devices. i cannot make it scroll able when i tried the solution here (that is <strong><em>overflow:auto/ overflow-y:scroll</em></strong>) it's not working even if i use <strong><em>!important</em></strong>. What i'm able to scroll was my main page even if the drop down is open. 
  <a href="https://i.stack.imgur.com/5Xxf3.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/5Xxf3.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-sm "&gt;
      &lt;button class="navbar-toggler navbar-toggler-right main-navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav-collapse" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="fa fa-bars"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand animation" data-animation ="fadeInLeft" href="#"&gt;&lt;img src="/093017/img/logo-tmi.png" alt="logo"/&gt;&lt;/a&gt;
      &lt;div class="collapse navbar-collapse" id = "main-nav-collapse" &gt;
          &lt;ul class="nav navbar-nav navbar-main mr-auto mt-2 mt-md-0 animation" data-animation = "fadeInRight"&gt;
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;Vehicles&lt;/a&gt;
                  &lt;div class="dropdown-menu default-menu main-menu sm-main-menu animation" data-animation = "fadeIn"&gt;
                      &lt;!-- Nav tabs --&gt;
                      &lt;div class="sm-main-nav" &gt;
                          &lt;a class="dropdown-item" href="#"&gt;Cars&lt;/a&gt;&lt;hr&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Vans &amp; Pickup&lt;/a&gt;&lt;hr&gt;
                          &lt;a class="dropdown-item" href="#"&gt;SUVs &amp; Crossover&lt;/a&gt;&lt;hr&gt;
                          &lt;a class="dropdown-item" href="#"&gt;MPVs&lt;/a&gt;&lt;hr&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Hybrid&lt;/a&gt;&lt;hr&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Performance&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link " href="#"&gt;Owners&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Shop&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link " href="#"&gt;Promotions&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>