title: How can I get div scroll overflow-x to work on a mobile browser?
body: <p>I have this code that works on desktop browsers. How can I achieve this behaviour on mobile browsers? Basically I want to create a menu which will scroll to the sides.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      #navBar {
          height: 55px;
          width: 80px;
          overflow-x: scroll;
          overflow-y:hidden;
          white-space: nowrap;
      }
  
      #navBar div {
          display: inline-block;
      }
      &lt;/style&gt;
  
  
      &lt;div id="navBar"&gt;
              akdhbaIDBhbfbhwhfbaibf
              &lt;div style="width: 100px; text-align: center; background-color: red;"&gt;
                  &lt;img src="" alt="Nav1" /&gt;
                  &lt;br /&gt;
                  &lt;span style="font-size: 80%"&gt;Nav1&lt;/span&gt;
              &lt;/div&gt;
              &lt;div style=" width: 100px; text-align: center;"&gt;
                  &lt;img src="" alt="Nav2" /&gt;
                  &lt;br /&gt;
                  &lt;span style="font-size: 80%"&gt;Nav2&lt;/span&gt;
              &lt;/div&gt;
              &lt;div style=" width: 100px; text-align: center; background-color: red;"&gt;
                  &lt;img src="" alt="Nav3" /&gt;
                  &lt;br /&gt;
                  &lt;span style="font-size: 80%"&gt;Nav3&lt;/span&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>