Bootstrap, remove responsive from navbar

Question

So, i have just a simple navbar with Bootstrap :

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">LOGO</a>
        </div>
        <div>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Messages</a></li>
                <li><a href="#">Paramètres</a></li>
                <li><a href="#">Mes frenks</a></li>
                <li class="divider"></li>
                <li><a href="#">Signaler un bug</a></li>
                <li><a href="#">Conditions générales</a></li>
              </ul>
            </li>
          </ul>

        <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
                <input class="form-control" type="text" placeholder="Recherche">
            </div>
        </form>

        </div><!--/.nav-collapse -->
      </div>
    </div>

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?

Have a look at this: http://stackoverflow.com/a/18902276/973155 — Farhan Ahmad, Feb 12 '14 at 20:11
It's not what i want. I want a responsive, but no with multiple line when resize...* — Clément Andraud, Feb 12 '14 at 20:27

Frax · Accepted Answer · 2014-02-13T11:38:28.617

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.

Hum, yeah, it's much better :) But do you think it's possible to specify a min size to the navbar ? Check with your fiddle if you resize the windows very small... if the navbar can stop move when the windows is very small it's very cool :) — Clément Andraud, Feb 13 '14 at 11:12
Bien sur! Just change the commented out `.container` rule. Instead of `width: 750px;` we can write `min-width: 400px;` for example. I will edit the answer to reflect this change. — Frax, Feb 13 '14 at 11:32
We also need to add the `min-width: 400px;` rule to the `.navbar` element to fix it properly. Updated the code. — Frax, Feb 13 '14 at 11:39
Yeah, very nice :) Merci ! I test that later, i can't now, thanks ;) — Clément Andraud, Feb 13 '14 at 12:49
hacky way. how to keep a navbar responsive and have an other one which is not ? — challet, Jun 22 '17 at 15:19

score 3 · Answer 2 · answered Aug 08 '18 at 19:29

Simply add .navbar-expand class to your navbar, and it will never collapse.

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

from https://getbootstrap.com/docs/4.1/components/navbar/#responsive-behaviors

This is the best way to do it! Thank you – Nick Oct 20 '18 at 00:20 — Nick, Oct 20 '18 at 00:20

score 2 · Answer 3 · answered Apr 22 '15 at 18:04

2

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

answered Apr 22 '15 at 18:04

WtFudgE

5,080
7
47
59

score 2 · Answer 4 · answered Mar 13 '16 at 01:03

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

<meta name="viewport" content="width=device-width, initial-scale=1">

DenisSt · Answer 5 · 2017-04-07T10:17:02.200

0

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

<ul class="nav navbar-nav nav-flat">

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; }
}

edited Apr 07 '17 at 10:17

answered Apr 07 '17 at 10:11

DenisSt

21
3

Bootstrap, remove responsive from navbar

5 Answers5

Linked