Bootstrap 4 Navbar para abrir de arriba a abajo en los móviles - css, twitter-bootstrap, bootstrap-4, navbar

Tengo una barra de navegación que funciona genial tanto en el escritorioy resoluciones móviles. El único problema que tengo es que una vez que el sitio se reduce al tamaño del dispositivo móvil, la barra de navegación se minimiza a un icono (eso es absolutamente correcto) y se expande de izquierda a derecha en lugar de arriba a abajo (ese es el problema). Se ve feo y no puedo encontrar una solución.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="index.html"><img src="/images/images/finfab-logo.jpg" alt="Company logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="about.html">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="contact.html">Contact<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="testimonials.html">Testimonials<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="recent.html">Recent Work<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="industrial.html">Industrial<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="domestic.html">Domestic<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="steel.html">Steel<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="extensions.html">Extensions<span class="sr-only">(current)</span></a>
</li>
</ul>

</div>
</nav>

No hay un estilo con respecto a esto porque no tenía ideas.

.navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #006600;
border-radius: 10px;
}

.navbar{
display: flex;
}

.navbar-toggler{
flex:1;
}

.navbar-collapse{
flex:3;

}

.navbar-nav{
border:1px solid;
border-radius: 10px;
border-color: #003300;
background-color: #003300;
}

.nav-item{
font-size: 25px;
font-weight: lighter;
}

.nav-link{
color:#003300;
}

Respuestas

Solo quita la costumbre flex Se agregó CSS ​​y la barra de navegación se mostrará de arriba a abajo en el móvil. Mantenga el CSS para los estilos, colores, bordes, etc.

.navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #006600;
border-radius: 10px;
}

.navbar-nav{
border:1px solid;
border-radius: 10px;
border-color: #003300;
background-color: #003300;
}

.nav-item{
font-size: 25px;
font-weight: lighter;
}

.nav-link{
color:#003300;
}

https://www.codeply.com/go/v7I5von1Xx