navbar collapse horizontally and display the nav items

Question

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;
}

Panama Prophet · Accepted Answer · 2017-01-14T21:46:45.777

3

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;
}

edited Jan 14 '17 at 21:46

answered Jan 14 '17 at 21:02

Panama Prophet

1,027
6
6

this even removes the spaces between two nav items. and also it is still opening vertically. – Rehan Jan 14 '17 at 21:09
Of course you need to specify more css to looks menu items better (such as `margin` and `padding`), but this techniques are working. Here is a link for example - https://jsfiddle.net/panamaprophet/2Lt2q3ga/3/ – Panama Prophet Jan 14 '17 at 21:18
Oh, yes to make menu contain all the menu items while it expanded you need to specify a float css-property for menu items wrapper too, like i did it in my example by the link above – Panama Prophet Jan 14 '17 at 21:19
It seem to work on the fiddle but not on my local system, which bootstrap did you use,because i'm using the latest which is unstable for now. – Rehan Jan 14 '17 at 21:36
updated the answer, here is an example: https://jsfiddle.net/panamaprophet/2Lt2q3ga/5/ – Panama Prophet Jan 14 '17 at 21:47
works fine,thanks for the help. but still there is a issue. when toggling the button the bottom side of the nav bar gets extended why is that? – Rehan Jan 14 '17 at 22:06
and how to remove the animation which comes when the nav items gets displayed. – Rehan Jan 14 '17 at 22:13
it maybe a side effect of fact that nav's element flex flow different than `row nowrap`. Try to understand how flexbox works, it helps you a lot while you are using bootsrap 4, because it's all about flexbox. Here is a link - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Panama Prophet Jan 14 '17 at 22:14
About transitions. Use a search, man http://stackoverflow.com/questions/13119906/turning-off-twitter-bootstrap-navbar-transition-animation – Panama Prophet Jan 14 '17 at 22:18

navbar collapse horizontally and display the nav items

1 Answers1