You have a few issues going on, mostly not overriding Bootstrap base styles.
- By default,
.navbar .navis a flex item, and on smaller screens, it'sflex-directioniscolumn- so I set that torow .navbar .nav ulis also a flex parent, and the flex direction was set tocolumn, so I set that to row. And sinceulisn't specific enough to overwrite bootstrap styles, I added the class selectorul.navbar-navso it was more specific than bootstrap.ul.navbar-navis also a flex child so you can set it'sflexproperties (flex: 1 1 100%).- I also added some
marginto yourliitems so you could see it working. - There is no reason for your
min-width: 400pxunless you have something going on below that for a different style. I removed it in my example, but you can certainly put it back in.
@media (max-width: 992px) {
.navbar {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
height: 54px
}
.navbar .nav {
flex-direction: row;
}
.navbar .nav ul.navbar-nav {
padding-top: 5px !important;
padding-bottom: 0 !important;
height: 30px;
font-size: smaller;
flex: 1 1 100%;
flex-direction: row;
justify-content: flex-end;
}
.navbar .nav ul.navbar-nav li {
margin: 0 10px;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand">
<img src="https://via.placeholder.com/40x35" width="40" height="35" class="d-inline-block align-top">
<span class="navbar-brand mb-1 h1">Byte Program</span>
</a>
<div class="nav navbar-nav ">
<ul class="navbar-nav mx-3 mt-3 ">
<li class="nav-item ">
<p class="nav-text ">1 </p>
</li>
<li class="nav-item">
<p class="nav-text ">2</p>
</li>
<li class="nav-item">
<p class="nav-text ">3</p>
</li>
<li class="nav-item">
<p class="nav-text "> 4</p>
</li>
</ul>
</div>
</nav>
it worked fine.thank you !