How to remove navbar change functionality in Bootstrap 3

Question

I have a client that is reversing course on a responsive adaptation for interior pages, and wants the new header and footer elements kept, minus the responsive functionality. We're using Bootstrap 3.

My issue is that all recommendations about removing responsive functionality result in either

1. If I keep the original Bootstrap.css file with the modified .container width and max-width settings, the nav bar appears as normal, but elements disappear after the 768px breakpoint is hit. No hamburger icon appears, and all other styling is normal.

2. Using re-compiled Bootstrap.css file from the bootstrap site having media-query breakpoints set to 0,the nav bar remains in collapsed state no matter the site width and the hamburger icon opens up the nav elements.

What I've done so far:

• Compiled a new bootstrap.css file with media breakpoints set to 0 for all screen sizes
• removed viewport meta tag
• set .container width to fixed with !important modifier

Short of removing Bootstrap from the interior pages, what other options do I have? This project is using bower for package management. As such, I can't use my existing less compiler to rebuild the css files and am limited to using the customizer site

Answer 1

To make the navbar never collapse to its vertical mobile view, set the @grid-float-breakpoint Less variable to 0px.
This variable is the browser viewport width below which the navbar collapses.
See also http://getbootstrap.com/css/#grid-less

Or alternatively, grab the applicable chunk of CSS from the official Bootstrap Non-responsive Example:

// From http://getbootstrap.com/examples/non-responsive/non-responsive.css
.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

/* Always float the navbar header */
.navbar-header {
  float: left;
}

/* Undo the collapsing navbar */
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}

.navbar-brand {
  margin-left: -15px;
}

/* Always apply the floated nav */
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}

/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
  float: right;
}

/* Undo custom dropdowns */
.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  color: #999 !important;
  background-color: transparent !important;
}

Answer 2

Since there was no quick and easy way to remove the functionality, I just went ahead and rebuilt the nav bar minus the Bootstrap tie-ins and duplicated the element styling in SCSS.

It took approximately 45 minutes to rebuild the nav bar with non-responsive functionality, as compared to ~2.5 hours looking for a fix.