On my website, I have successfully arranged the elements in the navbar to be fixed. However, when the screen size is reduced, the elements stack vertically.
1
2
3
4
5
6
I attempted to decrease the size of the navbar, but this caused the elements to align vertically. My goal is to have the li elements aligned horizontally within the navbar with a smaller font size. Below is the code snippet I used for resizing the navbar:
@media only screen and (min-width: 400px) and (max-width: 992px) {
.navbar {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
height: 54px
}
.navbar .nav ul {
padding-top: 5px !important;
padding-bottom: 0 !important;
height: 30px;
font-size: smaller;
display: inline;
}
}<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>