bootstrap navbar nav-pills vertical # 768px - css

Question

I have a bootstrap navbar with a series of links displayed as nav-pills.
The pills display horizontally on mobile correctly however when the screen gets to above 768px they swap to a vertical layout which I do not want.
I suspect there is a media query somewhere that triggers # 768px however I am unsure of where.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Title -->
<div class="navbar-header">
<!-- Required bootstrap placeholder for the collapsed menu -->
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><i class="icon-home icon-2x"></i> Home<br>
</li>
<li><i class=" icon-pencil icon-2x"></i>About Us
</li>
<li><i class=" icon-briefcase icon-2x"></i>Portfolio
</li>
<li><i class=" icon-envelope icon-2x"></i>Contact Us
</li>
</ul>
</li>
<li>
<%= link_to search_path do %>
<i class="glyphicon glyphicon-search"></i><!-- Find -->
<% end %>
</li>
<li>
<a href="#" class="visible-xs visible-sm" data-toggle="collapse" data-target="#activity_parent">
<i class="fa fa-list"></i>
</a>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
Edit
Ok, I found the following bootstrap media queries:
#media (min-width: 768px)
.navbar-nav {
float: left;
margin: 0;
}
#media (min-width: 768px)
.navbar-nav > li {
float: left;
}
I have changed the navbar menu items to "nav navbar-nav" from "nav nav-pills" and added the following css so that these setting remain even when the screen is less than 768px.
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
Now the links are displayed horizontally regardless of screen size. I do now have a new related problem.
When the screen > 768px the dropdown looks correct:
When the screen < 768px the dropdown looks incorrect:

Answer 1

Try this, this may helps you.
#media (max-width: 767px){
.nav-pills>li {
float: none;
display: block;
}
}
For Demo
Here is the codepen demo link.