На разных разрешениях меню выглядит по разному

[korotkov]

Здравствуйте уважаемые пользователи.
Прошу помочь разобраться, вот это меню выглядит по разному на разных разрешениях.
Блок практически меняет размер и весь текст сливается.
 

Скрытый текст

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
 
.menu { 
 position: block;
 max-width:100%;
 background: #fff;
}
 
.contact_info {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 14px;
}
 
nav {
  position: inherit;
  max-width: 100%;
  margin: 0px 0 0 0px;
}
nav ul {
  position: inherit;
  background: #48cfad;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
  text-align: center;
}
nav ul li:first-child a {
  background: #37bc9b;
  width: 49px;
  padding: 15px 0;
}
nav ul li:last-child {
  margin: 0;
}
nav ul li a {
  display: block;
  background: #48cfad;
  padding: 15px 20px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s linear;
}
nav ul li a:hover {
  background: #37bc9b;
}
nav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  border-bottom: 4px solid #48cfad;
}
nav ul li ul li {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
}
nav ul li ul li a {
  display: block;
  background: #3a3a3a;
  padding: 10px 15px;
}
nav ul li ul li a:first-child {
  background: #3a3a3a;
  width: auto;
  border-left: 4px solid transparent;
  padding: 10px 15px;
  font-size: 14px;
}
nav ul li ul li a:hover {
  background: #333;
  border-left: 4px solid #48cfad;
}

 

<div class="menu">
 <nav class='animated flipInX'>
  <ul>
    <li>
      <a href='#'>
        <div class='fa fa-home'></div>
      </a>
    </li>
    <li>
      <a href='#'>
        меню
      </a>
    </li>
     <li>
     <a href='#'>
        меню
     </a>
     </li>
      <li>
     <a href='#'>
        меню
     </a>
     </li>
      <li>
     <a href='#'>
       меню
     </a>
     </li>
      <li>
     <a href='#'>
        меню
     </a>
     </li>
      <li>
     <a href='#'>
        меню
     </a>
     </li>
     <span class="contact_info">Email: <a href="mailto:support">support</a></span>
    </ul>
</nav>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="js/index.js"></script>

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
  $(this).parent(".sub-menu").children("ul").slideToggle("200");
  $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});

 

[klierik]

выложи на http://jsfiddle.net

[korotkov]

https://jsfiddle.net/L21k0m8j/

[klierik]

Работа меню совершенно ожидаемая. В случае если содержимому блока не хватает ширины, то содержимое сбрасывается на новую строку.

Можно, сделать что бы всегда было в 1 строку но тогда будет скролл

[korotkov]

Как это можно сделать?

[klierik]

https://jsfiddle.net/L21k0m8j/1/

[korotkov]

Спасибо теперь работает как нужно!

Как вижу нужно было это добавить white-space: nowrap;