There is a navigation menu, I will divide it into three parts:
- The brand
- Navigation
- Contacts.
Folding to the mobile version occurs at a screen resolution of ~ 820px. Problem: With the screen from 820 to 1070 part of "3. Contacts" does not fit and is transferred to the second line. Task: If the screen is from 820 to 1070 px, only “3. Contacts” is collapsed, and below 820px of both parts is “2. Navigation 3. Contacts”. The code itself (When viewing the result of the code, make it full screen):
<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> 
