Prevent menu from collapsing in 768px display CSS media query

Question

I am trying to do a site using twitter bootstrap. I am having relatively less menus, so it kind of fits within the 768px display also. But in bootstrap by default, the menu

Answer 1

Here's what I used for bootstrap 3.3.4. It's a hack, but it's also not a 2-day fix redoing the css.

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

You may need to tweak the selectors, but basically, make the header full-width, then show and float the button right.