Bootstrap 4 navbar menu (mobile) style like in Bootstrap 3? [duplicate] - html

Question

This question already has answers here:
Bootstrap 4 responsive navbar vertical
(2 answers)
Closed 6 years ago.
Bootstrap 4 example
Bootstrap 3 example
How to get Bootstrap 4 menu like in Bootstrap 3?
This code from bootstrap 4 http://v4-alpha.getbootstrap.com/examples/navbar/:
<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav 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" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav> <!-- /navbar -->
</div><!-- /container -->

Answer 1

You need to add some css in bootstrap 4 and I imagine they are doing this because you can toggle the menu at different sizes so you need to add the media queries to whatever size you want your menu to open at. Something like so:
Here is a fiddle with some custom styles for the bootstrap 4 navbar Bootstrap 4 Navbar Fiddle
#media(max-width:33.9em) {
.navbar .collapse {max-height:250px;width:100%;overflow-y:auto;overflow-x:hidden;}
.navbar .navbar-brand {float:none;display: inline-block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
.navbar .collapse .dropdown-menu {
position: relative;
float: none;
background:none;
border:none;
}
}