Доброго времени суток, Столкнулся с 2 проблемами.
- В мобильной версии сайта при нажатии на Slide кнопку необходимо, чтобы Dropdown menu всегда был открыт.
- При нажатии на Slide кнопку, текст внутри как бы выстраивается, а должен выезжать без выстраивания, как в примере по которому делал https://bootsnipp.com/snippets/featured/navbar-lat...
<nav id="main-nav" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container">
<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="/" style="color: #f8f0d2;">TITLE</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-inverse side-collapse in">
<ul class="nav navbar-nav nabvbar-menu">
<li><a href="#" target="_blank">Something there</a>
</li>
<li><a href="#" target="_blank">Something there</a>
</li>
<li><a href="#">Something there</a></li>
<li><a href="#">Something there</a>
</li>
<li><a href="#" target="_blank">Something there</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Личный кабинет</b> <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Something there</a></li>
<li><a href="#">Something there</a></li>
<li><a href="#">Something there</a></li>
<li><a href="#">Something there</a></li>
<li><a href="#">Something there</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Выход</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
.dropdown {
right: 15px;
}
.dropdown-menu {
width: 230px;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow: hidden;
background-color: rgba(255,255,255,.8);
}
#login-dp .help-block {
font-size: 12px
}
#login-dp .bottom {
background-color: rgba(255,255,255,.8);
border-top: 1px solid #ddd;
clear: both;
padding: 14px;
}
#login-dp .social-buttons {
margin: 12px 0
}
#login-dp .social-buttons a {
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
@media (max-width:768px) {
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top: 0 none;
}
}
@media screen and (max-width: 768px) {
.navbar-toggle {
left: 10px;
}
.side-collapse-container {
width: 100%;
position: relative;
left: 0;
transition: left .4s;
}
.side-collapse-container.out {
left: 200px;
}
.side-collapse {
background: black;
top: 50px;
bottom: 0;
left: 0;
width: 200px;
position: fixed;
overflow: hidden;
transition: width .4s;
display: flex;
flex-wrap: wrap-reverse;
}
.side-collapse.navbar-right {
height: 100px;
}
.side-collapse.navbar-right.dropdown {
}
.side-collapse.in {
width: 0;
}
.navbar-nav {
margin-left: 15px;
margin-bottom: 0;
}
}
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]'),
sel1 = sideslider.attr('data-target'),
sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel1).toggleClass('in');
$(sel2).toggleClass('out');
$('.dropdown').toggleClass('open');
});
});
https://jsfiddle.net/zg8wLdc8/4/ 
