user2576486 user2576486 - 1 year ago 83
HTML Question

Bootstrap navbar not collapsing to pills at the right point

I have a navbar with a couple of links on the left side and social media buttons on the right. The problem is that when i shrink the window, the links and buttons do not collapse into pills soon enough. Instead, the social media buttons from the right side go under the links on the left side. And then when the window is too narrow to fit the links, the pills appear.

How can I edit this so the navbar collapses at the right position?
Any help is much appreciated:)

Here is my code:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#">WebsiteName</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<ul class="nav navbar-nav navbar-right nav-pills social-icons icon-circle icon-rotate">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>

Answer Source

Where you see 1000px, add your own width you want.

@media (max-width: 1000px) {
      .navbar-header {
          float: none;
      .navbar-left,.navbar-right {
          float: none !important;
      .navbar-toggle {
          display: block;
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      .navbar-fixed-top {
          top: 0;
          border-width: 0 0 1px;
      .navbar-collapse.collapse {
          display: none!important;
      .navbar-nav {
          float: none!important;
          margin-top: 7.5px;
      .navbar-nav>li {
          float: none;
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
          display:block !important;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download