1

Есть навигационное меню, разделю его на три составные части:

  1. Бренд
  2. Навигация
  3. Контакты.

Сворачивание в мобильную версию происходит при разрешении экрана ~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>

2 ответа 2

2

создайте свои классы для меню как col-md-6 и сделайте что бы он сворачивался до того как Список в меню не начнет переводится на вторую строку

1

Измени адаптивность, на появление кнопки меню при разрешении < 1071.

1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 23 июл 2015 в 9:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.