Bootstrap menu width - html

Question

I have a Bootstrap menu, but I have a problem when I want to change the width of the screen.
For example for 767 < width of screen < 950, I have a problem.
It seems to be a problem in ul class="nav", but I can't find the problem and solve it.
.static-navbar {
float: right;
}
#media (min-width: 768px){
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
#media (min-width: 768px){
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
.navbar-nav li.drop {
position: relative;
}
#media (min-width: 768px){
.navbar-nav>li {
float: left;
}
}
.nav>li {
position: relative;
display: block;
}
.navbar-nav > li > a {
padding: 40px 15px 38px;
}
.navbar-nav li.drop ul.dropdown {
margin: 0;
padding: 10px;
position: absolute;
top: 100%;
left: 0;
width: 250px;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="navbar-header">
Logo
</div>
</div>
<div class="col-sm-10 static-navbar">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="drop">
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>
Lorem Ipsum
</li>
</ul>
</li>
<li class="drop">
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>
Lorem Ipsum
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</div><!-- /.container -->
</nav>

Answer 1

I think Problems in .collapse. in screen < 767. Boostrap class collapse below css riles is apply.
.collapse{
display:none;
}
So, Your UL Not Display and you have not use collapse button in your html.
Try to something like this.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="navbar-header">
Logo
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="col-sm-10 static-navbar">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="drop"><a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>Lorem Ipsum</li>
</ul>
</li>
<li class="drop"><a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>Lorem Ipsum</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</div><!-- /.container -->
</nav>