CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Single Entity
Single Entity

Reputation: 3115

Bootstrap Navbar collapse point < 768px

This is an OLD question for Bootstrap 3 -> changing the collapse point for the navbar, but the methodologies suggested here:

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

and here:

Bootstrap 3 Navbar Collapse

do not work for collapsing below 768px, it only seems to work for extending the collapse point, not retracting it. I have a particular situation where my navbar has 3 buttons, so it doesn't need to collapse so early. I would like it to collapse at 420px instead.

Is there a CSS solution to this? If not, can somebody point me towards the correct attribute in the bootstrap customisation page which I need to change and download? Is it the generic breakpoints perhaps? Because there is nothing I can see which says Navbar breakpoints:

http://getbootstrap.com/customize/

As requested, my HTML for the navbar is simply:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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 class="navbar-collapse collapse" id = "navbar">
            <ul class="nav navbar-nav navbar-left">
                <li class = "navbar_buttons"><a id = "new_route_button"><strong>New Route</strong></a></li>
                <li class="divider-vertical"></li>
                <li class = "navbar_buttons"><a id = "clear_route_button">Clear Route</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">    <!--Right justified navbar list-->
                <li class = "navbar_buttons"><a id = "about_button">About</a></li>
            </ul>
        </div>

    </div>  <!-- Container -->

</nav>  <!-- End of Navbar Container -->

Then I have some CSS to add a vertical division:

/*Preventing vertical dividers from appearing collapsed*/
@media (max-width: 420px) {
.navbar-collapse .nav > .divider-vertical {
    display: none;
  }
}

/*Defining the vertical dividers*/
.navbar .divider-vertical {
  height: 50px;
  margin: 0 9px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #DADADA;
}

.navbar-inverse .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
}

Upvotes: 7

Views: 7098

Answers (2)

Richard Williams
Richard Williams

Reputation: 2242

The following code snippet is based on the original answer, but also works when there are drop down menus in the navbar.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  @media only screen and (min-width: 560px) {
    .collapse {
      display: block;
    }
    .navbar-header {
      float: left;
    }
    .navbar-toggle {
      display: none;
    }
    .navbar>.container .navbar-brand,
    .navbar>.container-fluid .navbar-brand {
      margin-left: -15px;
    }
    .container>.navbar-header,
    .container-fluid>.navbar-header,
    .container>.navbar-collapse,
    .container-fluid>.navbar-collapse {
      margin-right: 0;
      margin-left: 0;
    }
    .navbar-nav {
      float: left;
      margin: 0;
    }
    .navbar-nav.navbar-right {
      float: right;
      margin: 0;
    }
    .navbar-nav>li {
      float: left;
    }
    .navbar-nav>li>a {
      padding-top: 15px;
      padding-bottom: 15px;
    }
    .navbar-nav .open .dropdown-menu {
      position: absolute;
      float: left;
      width: auto;
      margin-top: 2px;
      background-color: #fff;
      border: 1px solid #ccc;
      border: 1px solid rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
      background-color: #e5e5e5;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
      color: #333;
    }
    .navbar-nav .open .dropdown-menu>li>a {
      line-height: 1.42857143;
    }
    .navbar-nav .open .dropdown-menu>li>a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
      padding: 3px 20px;
    }
    .navbar-right .dropdown-menu {
      right: 0;
      left: auto;
    }
  }
  
  @media only screen and (max-width: 559px) {
    .collapse {
      display: none;
    }
    .navbar-header {
      display: block;
    }
  }
</style>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362300

Yes, changing the breakpoint to anything less than 768px is different than changing the breakpoint over 768px. You need to override all of the Bootstrap defaults that normally make it collapse.

@media only screen and (min-width: 420px) {
    .collapse {
        display: block;
    }

    .navbar-header {
        float: left;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-nav.navbar-left {
       float: left;
       margin: 0;
    }

    .navbar-nav.navbar-right {
       float: right;
       margin: 0;
    }
    .navbar-nav>li {
        float: left;
    }
    .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

@media only screen and (max-width: 420px) {
     .collapse {
        display: none;
     }

     .navbar-header {
        display: block;
     }
}

http://www.bootply.com/wpUuFIZqJ2

Upvotes: 8

Related Questions