title: Horizontal navbar scroll on smaller devices
body: <p>I'm using bootstrap 4. I created a second navigation bar using</p>
  
  <pre><code>&lt;div class="nav-active-border b-danger bottom"&gt;
      &lt;ul class="nav nav-active-border b-warning flex-row"&gt;
         &lt;li class="nav-item"&gt;Link 1&lt;/li&gt;
         &lt;li class="nav-item"&gt;Link 2&lt;/li&gt;
         &lt;li class="nav-item"&gt;Link 3&lt;/li&gt;
         &lt;li class="nav-item"&gt;Link 4&lt;/li&gt;
         &lt;li class="nav-item"&gt;Link 5&lt;/li&gt;
         &lt;li class="nav-item"&gt;Link 6&lt;/li&gt;
         &lt;li class="nav-item"&gt;Link 7&lt;/li&gt;
         &lt;li class="nav-item"&gt;Link 8&lt;/li&gt;
         &lt;li class="nav-item"&gt;Link 9&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This however, on mobiles shows in two rows are there are multiple items. How to create a horizontal scroll for these nav items on mobile with indicators just for mobile layouts. It shows perfect on desktops and laptops</p>
  
  <p>I'm trying to achieve the same like on google
  <a href="https://www.google.co.in/intl/en/about/products/" rel="nofollow noreferrer">https://www.google.co.in/intl/en/about/products/</a></p>