title: Horizontal scrolling without displaying bar
body: <p>I want to display list of menu by scrolling horizontally. So I have written code as:</p>
  
  <pre><code>.sub-menu {
      overflow-x: scroll;
      overflow-y: hidden;
      white-space:nowrap;
  }
  
  .menu.navbar-nav li{
      width: 22%;
      text-align: center;
      display:inline-block;
      vertical-align:top;
  }
  </code></pre>
  
  <p>But it is showing a bar horizontally but I want to disappear it. Please see the <a href="https://i.stack.imgur.com/tkXb4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tkXb4.png" alt="image"></a>. </p>
  
  <p>Could you tell me someone how can I remove it.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="mobile-menu temp-mobile-menu visible-xs"&gt;
  &lt;div class="sub-menu"&gt;
      &lt;ul class="menu nav navbar-nav" id=""&gt;
          &lt;li class="active"&gt;&lt;a href="/bn" class="first leaf home active"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/bn/tonic-doctor" class="leaf doctor"&gt;Doctor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/bn/tonic-benefits" class="leaf benefits"&gt;Benefits&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/bn/packages" class="leaf packages"&gt;Packages&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/bn/health-topics" style="swiper-slide" class="last leaf স্বাস্থ্য-প্রসঙ্গ"&gt;স্বাস্থ্য প্রসঙ্গ&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;    
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Updated CSS</strong></p>
  
  <pre><code>.mobile-menu {
    overflow: hidden;
  }
  .sub-menu {
    min-height: 44px;
    white-space: nowrap;
    overflow-x: scroll;
  }
  .menu.navbar-nav li {
   width: 22%;
   text-align: center;
   display: inline-block;
   vertical-align: top;
  }
  </code></pre>