Есть навигационное меню, разделю его на три составные части:
- Бренд
- Навигация
- Контакты.
Сворачивание в мобильную версию происходит при разрешении экрана ~820px. Проблема: При экране от 820 до 1070 часть "3. Контакты" не влазит и переносится на вторую строку. Задача: Если экран от 820 до 1070 px, происходит сворачивание только "3. Контакты", а ниже 820px обоих частей "2. Навигация 3. Контакты". Сам код (При просмотре результата кода сделайте его на весь экран):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<header id="top" class="navbar navbar-static-top bs-docs-nav" role="banner">
<div class="container">
<!-- Кнопка сворачивания -->
<div class="navbar-header">
<button class="navbar-toggle" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
Меню
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Бренд</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<div class="row">
<!-- меню -->
<div class="col-md-6 col-sm-8 col-xs-12">
<ul class="nav navbar-nav">
<li>
<a href="/oplata.html">Оплата</a>
</li>
<li>
<a href="/условия-работы.html">Условия работы</a>
</li>
<li>
<a href="/услуги.html">Услуги</a>
</li>
<li>
<a href="/контакты.html">Контакты</a>
</li>
<li>
<a href="/гарантии.html">Гарантии</a>
</li>
</ul>
</div>
<!-- Телефон и логин -->
<a class="navbar-brand navbar-brand60 pointer city" data-toggle="modal" data-target="#geo"> (383) 123-123-123<br /><span class="dotted font60 " >Новосибирск</span> </a>
<div class="col-md-2 col-sm-2 col-xs-12">
<!-- логин -->
<ul class="nav navbar-nav">
<li>
<a class="pointer" data-toggle="modal" data-target="#myModal">Вход/Регистрация</a>
</li>
</ul>
</div>
</div>
<!-- /row -->
</nav>
</div>
</header>