Bootstrap 4 Pasek nawigacyjny do otwierania od góry do dołu na telefonach komórkowych - css, twitter-bootstrap, bootstrap-4, navbar

Mam pulpit nawigacyjny działający genialnie na obu komputerachi rozdzielczości mobilne. Jedynym problemem, jaki mam, jest to, że gdy strona zmniejsza się do rozmiaru mobilnego, pasek nawigacyjny minimalizuje się do ikony (która jest absolutnie w porządku) i rozwija się od lewej do prawej zamiast góry do dołu (to jest problem). Wygląda brzydko i nie mogę znaleźć rozwiązania.

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

Nie ma w tym stylu stylizacji, ponieważ nie miałem żadnych pomysłów.

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

Odpowiedzi:

Po prostu usuń zwyczaj flex CSS, który dodałeś, a pasek nawigacyjny wyświetli od góry do dołu na telefonie komórkowym. Zachowaj CSS dla stylów, kolorów, granic itp

.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