7

This is the paragraph from Bootstrap 3 documentation about disabling responsivness for a navbar:

If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).

I really can't get how to disable responsivness. Also, from the non-responsive example I can't understand much more. Someone has already do that?

devo
  • 21,875
  • 18
  • 78
  • 125
Fred K
  • 11,133
  • 13
  • 70
  • 90
  • See: [Bootstrap, remove responsive from navbar](http://stackoverflow.com/q/21738417/55075) at SO – kenorb May 19 '15 at 12:51

2 Answers2

8

Well, the key appears to be building a stylesheet that locks out all of the responsive stuff. Take a look at http://getbootstrap.com/examples/non-responsive/non-responsive.css for what they use to stop the page from being responsive. You could probably lift that entire sheet.

Regarding the navbar specifically, there is nothing that you can do without having a sheet like the one linked in this answer. That being said, the one thing the example doesn't do that you probably should is rip out the menu icon that will show up when the navbar collapses. That would be this bit of code:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
Sean Ryan
  • 6,000
  • 1
  • 23
  • 23
6

Check this: https://github.com/bassjobsen/non-responsive-tb3 and also read https://github.com/twbs/bootstrap/issues/10371.

You can do this by setting the @grid-float-breakpoint to 0 in your variables.less. And recompile bootstrap.

update As mentioned in the comments by @fred-k the above did not make the navbar dropdowns non-responsive. To fix this you will have to set @screen-xs-max in navbar.less to 0 too. This issue will be fixed in future releases, see https://github.com/twbs/bootstrap/pull/10465

Note @screen-xs-max in navbar.less also influence the Navbar forms

Community
  • 1
  • 1
Bass Jobsen
  • 47,890
  • 16
  • 139
  • 218
  • Hi Bass. I've tried your non-responsive-tbr and works well, but I prefer to "hacking" the official Bootstrap code. That's the reason why I'm asking only for the navbar. Yes, setting the variable @grid-float-breakpoint to 0 it seems to solve but the dropdown-menu is shown as responsive! What other edits I have to do to totally disable navbar responsivness? thanks – Fred K Sep 20 '13 at 08:16
  • Soo good, Bass! Now all it seems non-responsive. In your opinion, is there other edits to do (that I can't see now)? – Fred K Sep 20 '13 at 09:33
  • For the navbar no other changes are needed. When you want to fix the width of navbar and content, you should look at the `.container` class. For other changes see also: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/ – Bass Jobsen Sep 20 '13 at 09:39
  • As of 3.1.1, at least, this doesn't work for me. Changing the grid float breakpoint has no impact. – Michael Oryl May 24 '14 at 01:59
  • @MichaelOryl see http://getbootstrap.com/getting-started/#disable-responsive in the first place. Setting `@grid-float-breakpoint: 0; ` in less/variables.less and recompile bootstrap by running `grunt dist` will also work for the current 3.1.1. version. – Bass Jobsen May 24 '14 at 09:17
  • that works for making all the navbar**s** non responsive. How if you want one responsive and other one which is not ? – challet Jun 22 '17 at 15:21