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

Question

My Bootstrap nav has only two elements. How do I disable the collapsing feature for Bootstrap when you minimize the page? The Login button can easily fit even when I minimize the page.

/* Navigation */
.navbar-brand img {
    width:30%;
    height:100%;
}

.navbar-default {
    padding-top:10px;
    padding-bottom:10px;
}

.navbar {
  background: #23272D !important;
}

#logo {
  width: 83.33px;
  height: 27.68px;
}

#login_button {
  position: relative !important;
  top: 7px !important;
}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <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>

            <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                <button type="button" class="btn btn-danger" id='login_button'>Login</button>
        </div>
    </nav>
    <!-- End of Navigation -->

Irfan Ali · Accepted Answer · 2017-03-15T09:22:01.663

2

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.

edited Mar 15 '17 at 09:22

answered Mar 15 '17 at 07:05

Irfan Ali

1,998
1
20
22

Great answer, but is there a way to keep "Login" from going underneath the logo when the window is minimized? Instead have the "Login" stay where it has always stayed :) – user6902601 Mar 15 '17 at 07:40
I updated my answered please check it. – Irfan Ali Mar 15 '17 at 09:22

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

1 Answers1