title: Dealing with overflow of a navigation bar
body: <p>I'm trying to create a website main navigation bar (ideally using only css). I am having trouble dealing with the overflow of links at smaller screen resolutions. </p>
  
  <p>I'm wondering if someone could provide some suggestions for a better way to handle the menu at smaller screen resolutions.</p>
  
  <p>The natural behaviour of the links is to start on a new line so I tried increasing the height of the bar at a smaller media query.</p>
  
  <pre><code>nav, ul, li, a {
      padding: 0 0;
      margin: 0 0
  }
  
  nav.navibar {
      width: 100%;
      float: left;
      background-color: #283035;
      height: 60px;
      text-decoration: none;
      white-space: nowrap;
  }
  
  nav.navibar .active{
      background-color: #E74310; 
  }
  
  ul.navilink{
      list-style:none;
      font-weight:bold;
      margin-bottom: 0;  
      float:left;
      position:relative;
      z-index:5;
  }
  
  ul.navilink li{
      float:left;
      position:relative;
  }
  
  ul.navilink a{
      display:block;
      padding: 15px 15px;
      color:#ffffff !important;
      text-decoration:none;
      cursor: pointer;
      font-size: 21px;
      font-family: Raleway, Helvetica, "Trebuchet MS", sans-serif;
      text-align: center;
      line-height: 30px;
      /*min-width: 150px;*/
      transition: all 0.3s ease;
  }
  
  ul.navilink a:hover{
      background-color: #000;
      color:#fff;
      text-decoration:none;
  }
  
  /*--- DROPDOWN ---*/
  ul.navilink ul,
  ul.navilink li:hover ul li ul{
      list-style:none;
      position:absolute;
      display: none; 
  }
  ul.navilink ul li{
      padding-top: 0px; 
      float:none;
  }
  
  ul.navilink ul a{
      white-space:nowrap; 
      font-size: 16px;
      text-align: left;
  }
  
  ul.navilink li:hover ul {
      display: block;
      left: 0;
      z-index: 2147483647;
  }
  
  ul.navilink li ul li:hover ul {
      display: block;
      top: 0;
      left:100%; 
      z-index: 2147483647;
  }
  
  ul.navilink li:hover a{
      background:#000 !important;
      text-decoration:none;
  }
  
  ul.navilink li:hover ul a{
      text-decoration:none;
  }
  
  ul.navilink li:hover ul li a:hover{
      background:#f05221 !important;
  }
  
  @media only screen and (max-width: 1100px) {
      nav.navibar {
          height: 120px;
          /*overflow: auto;*/
      }
  }
  
  
  &lt;nav class="navibar"&gt;
  &lt;ul class="navilink"&gt;
      &lt;li&gt;&lt;a class="active" href="logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;General&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="po_search"&gt;PO Search&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Inventory&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="grazing_rep"&gt;Grazing Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;PI Checks&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="batch_rotat"&gt;Batch Rotation&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="dynamic_pi"&gt;Dynamic PI Variance&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="pi_query_ch"&gt;Queries Check&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="wrong_check"&gt;Wrong Item Checks&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a&gt;QC Inbound&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="qc_error_ch"&gt;QC Error Checks&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="qc_process"&gt;QC Process&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="qc_putaway"&gt;QC Putaway&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="qc_inbound"&gt;QC Stats&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="qc_targeted"&gt;QC Targeted&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>