bootstrap collapse menu has 2 rows - html

Question

I am building this website
torgoborudovanie.com
I have a collapsing navbar build with bootstrap.But when I try to resize the window I get something like this :
As you can see (and you can actually try it ) nav bar now has 2 lines and it looks wired (the actual problem is that it looks like this on Iphone and Ipad) Then you can resize it a little bit more and it gets collapsed as I want.
You can see the code by simply viewing html code in developer tools.
So I will not post it here to make qustion clean and small.But if you want I can post the code here too=)

Answer 1

I ended up with this (quite shitty to be fair workaround)
On page load if I have window.width less than 1200px I just hide long text.
function hideSlogan() {
if($(window).width() <1200) {$('.slogan').hide()}
};
hideSlogan();

Answer 2

Go to the CSS rules starting at the MOBILE NAV comment; these are the rules you can adjust to make the navbar collapse at different breakpoints.
On a sidenote, there is one extra, broken list tag in the nav and with the positioning of Надежный партнер - качественные решения! inside your navbar-collapse div you'll the following behavior:
If you expand the menu when it's in the mobile and then expand the viewport your navbar will revert to the line-height: 60px unless the browser is refreshed. Might not matter but since you're trying to change the collapse breakpoint it's worth mentioning.
**I also moved the inline styles with the rest of the CSS Rules.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700, 800);
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic);
* {
margin: 0;
padding: 0px;
font-family: 'Open Sans', sans-serif;
}
body {
background: #fff;
margin: 0;
color: #42413e;
padding-top: 50px;
}
/* BOOTSTRAP MODIFICATION */
.navbar-right a .btn-orange {
margin-top: -5px;
}
.btn-orange {
background: #f27242;
border-radius: 2px;
color: white;
font-size: 12px;
font-weight: 700;
}
.btn-orange:hover {
background: #e16a3e;
color: white;
}
.navbar-default .navbar-brand {
height: 50px;
padding: 10px 15px;
font-size: 20px;
line-height: 22px;
font-weight: 700;
}
.navbar.navbar-default {
background-color: #ffffff;
border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #f27242;
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #ccc;
}
.navbar-default .navbar-right {
padding-top: 5px
}
.navbar-default li.dropdown a {
color: black;
}
.navbar-default span.head-title {
line-height: 60px;
}
.navbar-default .navbar-right .dropdown-menu {
right: auto;
left: 0;
}
.navbar-right li.contact-info a {
color: #42413e;
}
/****MOBILE NAVBAR******/
#media (max-width: 1200px) {
.custom-navbar .navbar-header {
float: none;
}
.custom-navbar .navbar-left,
.custom-navbar .navbar-right {
float: none !important;
}
.custom-navbar .navbar-toggle {
display: block;
}
.custom-navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow-x: hidden;
}
.custom-navbar.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.custom-navbar .navbar-collapse.collapse {
display: none!important;
}
.custom-navbar .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.custom-navbar .navbar-nav > li {
float: none;
}
.custom-navbar .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.custom-navbar .collapse.in {
display: block !important;
}
.custom-navbar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.custom-navbar .navbar-brand {
height: 55px;
padding: 10px 15px;
font-size: 20px;
line-height: 22px;
font-weight: 700;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar navbar-default custom-navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Переключить навигацию</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://www.torgoborudovanie.com/assets/img/logo1.png" width="140">
</a>
</div>
<div class="collapse navbar-collapse"><span class="head-title">Надежный партнер - качественные решения!</span>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Каталог <span class="caret"></span>
<ul class="dropdown-menu">
<li>Стеллажи
</li>
<li>Торговая мебель
</li>
<li>Тележки и корзины
</li>
<li> Кассовые боксы
</li>
<li>Холодильное оборудование
</li>
<li role="separator" class="divider"></li>
<li>Условия доставки
</li>
</ul>
</li>
<li class="contact-info">
<i class="fa fa-phone "></i> 8 (343) 3448090
</li>
<li class="contact-info">
<i class="fa fa-envelope"></i> info#optimagp.ru
</li>
<li>
<a href="#f">
<button class="btn btn-sm btn-orange" type="button">Заказать звонок</button>
</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 3

you need to change your breakpoint, when the navbar gets collapsed...
so for example, this should work:
#media only screen and (min-width: 1200px) {
.collapse {
display: block;
}
.navbar-toggle {
display: none;
}
}
#media only screen and (max-width: 1200px) {
.collapse {
display: none;
}
.navbar-toggle {
display: block;
}
}
because it floats (because its so long) after 1200px width...
** sorry, i made a mistake... try it now :) **