Tag Archive for: no collapsing

Avoid Navbar in Bootstrap from collapsing

Create a simple Bootstrap Navbar without collapsing in cell phones and tablet devices.

<!-- Simple Bootstrap Navbar without collapsing -->
<header class="navbar navbar-default container-fluid">
    <ul class="nav navbar-nav navbar-left">
        <li><a class="navbar-brand">My App</a></li>
        <li><a>Tasks</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a>12/12/99</a></li>
        <li><a href="#">@</a></li>
    </ul>
</header>

You just need to add this code to your style.css

/* Avoid Navbar from collapsing (Bootstrap override) */
.navbar-nav>li, .navbar-nav {
    float: left !important;
}

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

See a real example: