Bootstrap 3 - Disable Navbar Collapse

Bootstrap 3 - disable navbar collapse

After close examining, not 300k lines but there are around 3-4 CSS properties that you need to override:

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

And with this your menu won't collapse.

DEMO (jsfiddle)

EXPLANATION

The four CSS properties do the respective:

The default .collapse property in bootstrap hides the right-side of the menu for tablets(landscape) and phones and instead a toggle button is displayed to hide/show it. Thus this property overrides the default and persistently shows those elements.
For the right-side menu to appear on the same line along with the left-side, we need the left-side to be floating left.
This property is present by default in bootstrap but not on tablet(portrait) to phone resolution. You can skip this one, it's likely to not affect your overall navbar.
This keeps the right-side menu to the right while the inner elements (li) will follow the property 2. So we have left-side float left and right-side float right which brings them into one line.

Bootstrap 4 disable navbar-collapse in container

Just use navbar-toggleable-xl..

Edit - Bootstrap 4 beta is now navbar-expand

<nav class="navbar navbar-toggleable-xl navbar-inverse bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

http://www.codeply.com/go/8FF7HX22L3

Alternately, it can be done using the flexbox utility classes...

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
    <div class="container">
        <a href="/" class="navbar-brand float-left">PIM</a>
        <ul class="nav navbar-nav flex-row float-right">
            <li class="nav-item"><a class="nav-link pr-3" href="">Login</a></li>
            <li class="nav-item"><a class="nav-link" href="">Sign up</a></li>
        </ul>
    </div>
</nav>

http://www.codeply.com/go/FvT4XqRXNT

I don't need my Bootstrap nav to collapse. How do I fix?

Update Navigation part with below code

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <div class="navbar-brand">
            <a href="#"> <img src="http://logos-download.com/wp-content/uploads/2016/06/Udemy_logo.png" class="img-responsive" id="logo"> </a>
        </div>
            <div class="pull-right">
              <button type="button" class="btn btn-danger" id="login_button">Login</button>
        </div>

    </div>
</nav>

try this.

Disable responsive (mobile) navbar in Bootstrap

Bootstrap 5 (update 2021)

The navbar-expand* class are still used in Bootstrap 5. Therefore if you want to prevent the Navbar from collapsing (stacking vertically) use navbar-expand. Due to changes in padding, Bootstrap 5 Navbars do require an inner container.

Bootstrap 4 (original answer)

The simplest way is using the ~~navbar-toggleable-xl~~ navbar-expand class (now in Bootstrap 4) so that the menu is non-mobile (horizontal) at all widths..

<nav class="navbar navbar-expand navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Demo: Bootstrap 4 Disable Responsive Navbar

You can also use the flexbox utilities to prevent the vertical navbar on smaller screens. The flex-nowrap flex-row allow the navbar to remain horizontal at all widths...

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href="/login">Login</a></li>
        <li class="nav-item"><a class="nav-link" href="/signup">Sign up</a></li>
    </ul>
</nav>

How it works:

navbar-expand -- always horizontal, non collapsing

navbar-expand-xl -- collapses into mobile < 1200px

navbar-expand-lg -- collapses into mobile < 992px

navbar-expand-md -- collapses into mobile < 768px

navbar-expand-sm -- collapses into mobile < 576px

no navbar-expand -- always mobile,collapsed (default)

http://codeply.com/go/z9VJTOBuaS

Bootstrap 3 + Less - disable collapse-navbar at bigger screens

<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>Navbar</title></head><body><nav class="navbar navbar-default">  <div class="container-fluid">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">Brand</a>    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>        <li><a href="#">Link</a></li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Action</a></li>            <li><a href="#">Another action</a></li>            <li><a href="#">Something else here</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">Separated link</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">One more separated link</a></li>          </ul>        </li>      </ul>      <form class="navbar-form navbar-left" role="search">        <div class="form-group">          <input type="text" class="form-control" placeholder="Search">        </div>        <button type="submit" class="btn btn-default">Submit</button>      </form>    </div><!-- /.navbar-collapse -->  </div><!-- /.container-fluid --></nav></body></html>

bootstrap 3 - Disable navbar-toggle stacking on mobile phones

Solved it, I had to add width attribute to the div container which has these two buttons from the right. The div was improperly resizing, hence it was putting the second (toggle) button in the new line.

How to hide collapsible Bootstrap navbar on click

Update 2021 - Bootstrap 5 (beta)

Use javascript to add a click event listener on the menu items to close the Collapse navbar..

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
    l.addEventListener('click', () => { bsCollapse.toggle() })
})

BS5 demo javascript method

Or, Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Disabled</a>
                </li>
            </ul>
            <form class="d-flex my-2 my-lg-0">
                <input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

BS5 demo data-attributes method

Update 2019 - Bootstrap 4

The navbar has changed, but the "close after click" method is still the same:

BS4 demo jQuery method

BS4 demo data-toggle method

Bootstrap 3 (original answer)

You can add the collapse component to the links like this..

<ul class="navbar-nav mr-auto">
     <li class="nav-item active">
         <a class="nav-link" href="#home" data-toggle="collapse" data-target=".navbar-collapse.show">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.show">Pricing</a>
     </li>
 </ul>

BS3 demo using 'data-toggle' method

Or, (perhaps a better way) use jQuery like this..

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

BS3 demo using jQuery method

disable Bootstrap's Collapse open/close animation

For Bootstrap 3 and 4 it's

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

Bootstrap 3 - Disable Navbar Collapse