Bootstrap Navbar collapses when it's not supposed to

Question

I've got a header page which contains a navbar, logo and another navbar.

On a desktop the first navbar contains the information to the right hand side which is perfect as seen below:

However when I change to a small screen it comes up like below:

Is there a way to change this so that on a small screen it it won't collapse? If any css is needed is it also possible to change the ID so it will not interfere with my other NavBar and its CSS?

At the moment my code:

<div class="container-fluid">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="register.php"><span class="glyphicon glyphicon-user"> </span> Sign Up</a></li>
        <li><a href = "login.php"><span class = "glyphicon glyphicon-log-in"></span> Login</a></li>
        <li><a href="checkout.php"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li>
    </ul>
</div>

Thank you for any help!

Edit:

This is my other navbar which sits below my logo which works perfectly: I hope this helps some more.

<div class="container">
            <nav class="navbar navbar-default" role="navigation">
                <!-- 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=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="#">Collections</a></li>
                        <li><a href="earth_products.php">Jewellry</a></li>
                        <li><a href="#">Offers</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </nav>

        </div>

CSS for this navbar:

.navbar .navbar-nav {
display: inline-block;
float: none;
color: #000000;
}

.navbar .navbar-collapse {
text-align: center;
}

.navbar-default {
background-color: #44B5DB;
border-color: #000000;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li      > a:focus {
background-color: #FFFFFF;
color: #000000;
}

.navbar-default .navbar-nav > li > a {
color: #000000;
}

I thought it might be easier showing a picture. So basically my Navbar #1 needs to show:

Sign up | Login | Checkout

Even on small devices rather than one on top of each other. As per the picture my current setup is: Navbar #1, Logo, Navbar #2

I hope this makes sense!

Answer 1

You can add some customization to the upper-navigation div to it doesn't collapse by using the navbar-default class as a base. And the upper and lower navbars lineup (they don't have to though).

I also adjusted your CSS so the links line-height works when you hover over them; the gap is removed now from the bottom.

 .navbar-default.nav-top { background: #fff; } .navbar-default.nav-top ul { display: inline-block; float: right; } .navbar-default .navbar-top li { float: left; font-size: 12px; } .navbar.navbar-custom { background: #44B5DB; border-color: #000000; } .navbar.navbar-custom .navbar-nav > li > a { color: #000000; } .navbar.navbar-custom .navbar-nav > li > a:hover, .navbar.navbar-custom .navbar-nav > li > a:focus { background: #FFFFFF; color: #000000; width: 100%; } .navbar.navbar-custom .navbar-nav { text-align: center; } @media (min-width: 768px) { .navbar.navbar-custom .navbar-nav > li { float: none; display: inline-block; } .navbar.navbar-custom .navbar-nav { width: 100%; text-align: center; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <nav class="navbar-default nav-top"> <div class="container"> <ul class="nav navbar-top"> <li><a href="#"><span class="glyphicon glyphicon-user"> </span> Sign Up</a> </li> <li><a href="#"><span class = "glyphicon glyphicon-log-in"></span> Login</a> </li> <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li> </ul> </div> </nav> <div class="container"> <nav class="navbar navbar-default navbar-custom"> <!-- 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-navbar" 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> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-navbar"> <ul class="nav navbar-nav"> <li><a href="index.php">Home</a> </li> <li><a href="#">Collections</a> </li> <li><a href="earth_products.php">Jewellry</a> </li> <li><a href="#">Offers</a> </li> </ul> </div> </nav> </div> 

Answer 2

Just make sure the list elements in your top navbar will be floated left on small screens. You also might want to float the parent element to the right.

I have added some extra classes so you do not overwrite the default style, because you do not want to affect other navbars as i suggest.

I am sure you will get the idea.

 @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"); /* Keep list elements floated so they do not collapse */ .navbar-nav>li.top-nav { float: left; } /* keep the ul floated to the right */ .top-nav-right { float: right!important; } .navbar .navbar-nav { display: inline-block; float: none; color: #000000; } .navbar .navbar-collapse { text-align: center; } .navbar-default { background-color: #44B5DB; border-color: #000000; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #FFFFFF; color: #000000; } .navbar-default .navbar-nav > li > a { color: #000000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container-fluid"> <ul class="nav navbar-nav navbar-right top-nav-right"> <li class="top-nav"><a href="register.php"><span class="glyphicon glyphicon-user"> </span> Sign Up</a></li> <li class="top-nav"><a href = "login.php"><span class = "glyphicon glyphicon-log-in"></span> Login</a></li> <li class="top-nav"><a href="checkout.php"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li> </ul> </div> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <!-- 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=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="index.php">Home</a></li> <li><a href="#">Collections</a></li> <li><a href="earth_products.php">Jewellry</a></li> <li><a href="#">Offers</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> </div>