title: How to get a nav menu bar to scroll horizontally
body: <p>I've got a nav bar with a few li tags that fall under each other when on a smaller screen size. I want the nav bar to remain the same height and scroll horizontally when on a smaller device screen but everything I'm trying is not working. Can someone shine a light on what is wrong here please!</p>
  
  <p>HMTL:</p>
  
  <pre><code>&lt;nav role="navigation" class="site-navigation main-navigation"&gt;
    &lt;div class="menu"&gt;
      &lt;ul&gt;
        &lt;li class="page_item page-item-40"&gt;&lt;a href="http://localhost/property_abba/for-sale/"&gt;Buy&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-41"&gt;&lt;a href="http://localhost/property_abba/for-rent/"&gt;Rent&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-7"&gt;&lt;a href="http://localhost/property_abba/sell/"&gt;Sell&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-9 current_page_item"&gt;&lt;a href="http://localhost/property_abba/valuations/"&gt;Valuations&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-15"&gt;&lt;a href="http://localhost/property_abba/property-management/"&gt;Property Management&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-11"&gt;&lt;a href="http://localhost/property_abba/about-us/"&gt;About Us&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page_item page-item-13"&gt;&lt;a href="http://localhost/property_abba/contact-us/"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media screen and (max-width : 480px){
    div.menu ul {
      display: inline-block;
      max-height: 34px;
      overflow: auto;
      white-space: nowrap;
    }
    div.menu a {
      display: inline-block;
      text-align: center;
    }
  }
  </code></pre>
  
  <p>But this currently is not working.</p>