So, i have just a simple navbar with Bootstrap :
Check fiddle : jsfiddle
I do not want that when you change the size of the window, the navbar is divided into multiple lines. In my example, the dropdown menu and input is placed below.
I want the navbar is just crushed up, staying on the same line .. any idea?
It can be done. Not too complicated actually.
I simply downloaded the Bootstrap 3 source code and scanned through their CSS file. They have @media queries for different screen sizes (as you already know). I simply copied all the CSS rules they use for @media (min-width: 768px) and put them in a new rule: @media (max-width: 768px)
Here it is so you can use it as it is:
CSS:
@media (max-width: 768px) { .navbar-header { float: left; } .navbar { border-radius: 4px; min-width: 400px; } .nav-tabs-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { border-bottom-color: #fff; } .nav-justified > li { display: table-cell; width: 1%; } .nav-justified > li > a { margin-bottom: 0; } .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border-bottom-color: #fff; } .nav-tabs.nav-justified > li { display: table-cell; width: 1%; } .nav-tabs.nav-justified > li > a { margin-bottom: 0; } .navbar-right .dropdown-menu { right: 0; left: auto; } .navbar-right .dropdown-menu-left { right: auto; left: 0; } .container { min-width: 400px; } .navbar-collapse { width: auto; border-top: 0; box-shadow: none; } .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-collapse.in { overflow-y: visible; } .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; } .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: 0; margin-left: 0; } .navbar-static-top { border-radius: 0; } .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; } .navbar-toggle { display: none; } .navbar-nav { float: left; margin: 0; } .navbar-nav > li { float: left; } .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; } .navbar-nav.navbar-right:last-child { margin-right: -15px; } .navbar-left { float: left !important; } .navbar-right { float: right !important; } .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; } .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; } .navbar-form .radio, .navbar-form .checkbox { display: inline-block; padding-left: 0; margin-top: 0; margin-bottom: 0; vertical-align: middle; } .navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] { float: none; margin-left: 0; } .navbar-form .has-feedback .form-control-feedback { top: 0; } .navbar-form { width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-form.navbar-right:last-child { margin-right: -15px; } .navbar-text { float: left; margin-right: 15px; margin-left: 15px; } .navbar-text.navbar-right:last-child { margin-right: 0; } } Note that I commented out the .container rules so it won't have a fixed size anymore. Here's a copy of your fiddle with the new CSS: http://jsfiddle.net/Fraximus/5KAXf/1/
Let me know if it works.
This did the job for me:
http://getbootstrap.com/examples/non-responsive/non-responsive.css
Just added those and the whole thing was back to normal
HOW TO DISABLE RESPONSIVENESS FROM BOOTSTRAP SASS / SCSS / LESS
With compiled versions of bootstrap https://github.com/twbs/bootstrap-sass is easy, just add this variables BEFORE compiling it.
SASS / SCSS
$grid-float-breakpoint:1px; $screen-xs:1px; $screen-sm:2px; $screen-md:3px; $screen-lg:9999px; LESS
@grid-float-breakpoint:1px; @screen-xs:1px; @screen-sm:2px; @screen-md:3px; @screen-lg:9999px; Remove "viewport" from header
May be it helps. I wanted to avoid vertical items alignment on small screen. Here is what I did: added nav-flat class to root ul element
And this css:
@media (max-width: 768px) { .nav-flat li { display: inline; } .nav-flat li a { display: inline; } .dropdown-menu li { display: block; } .dropdown-menu li a { display: block; } }