CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Rehan
Rehan

Reputation: 4013

navbar collapse horizontally and display the nav items

I have a navbar with a button and nav brand,when I click the button the the items get displayed below in the sense it is collapsing verically but I need it to collapse horizontally. I have seen some question here,but still not able to achieve what I need.

here is the sketch of what i need

<nav class="navbar navbar-light" style="background-color: #2C3E50 ;">
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button>
    <h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
    <div class="collapse width" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
            <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
        </ul>
    </div>
</nav>

//css

     .navbar {
    margin-top: 40px;
    display: inline-block;
}
    .navbar {
    border-bottom-right-radius: 200px;
    border-top-right-radius: 200px;
}

Upvotes: 1

Views: 4955

Answers (1)

Sergei Klykov
Sergei Klykov

Reputation: 1037

You can do this using this technique:

.navbar-nav { white-space: nowrap; }
.nav-item { display: inline-block; }

or by using flexbox:

.navbar-nav { display: flex; flex-flow: row nowrap; }

The first solution prevent lines from breaking and specify menu item to have inline behaviour. The second solution based on a using of flexbox layout.

UPDATED

Using bootstrap 4 you need some more modifications, add this:

.navbar-nav {
  flex-flow: row nowrap;
}

.navbar {
    flex-flow: row nowrap;
    display: inline-flex;
}

Upvotes: 3

Related Questions