I am facing an issue with my two navbars, one above the other. The top bar is thinner and consists of two navigation items aligned to the right of the page. Despite setting it not to collapse when the page width is reduced, the items suddenly disappear when the width is decreased too much. It seems like they are moving behind the lower navbar.
My goal is to keep these two navigation items static on the page regardless of the width.
Custom CSS:
body {
padding-top: 105px;
}
.navbar-top-custom {
height: 28px;
background-color: rgba(32, 32, 32, 1);
}
.navbar-bottom-custom {
margin-top: 28px;
height: 56px;
background-color: rgba(53, 53, 53, 1);
}
.navbar-top-custom .nav-item{
color: rgb(211, 211, 211) !important;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
HTML:
<nav class="navbar navbar-expand-sm navbar-top-custom fixed-top">
<ul class="nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-question-circle" style="padding-right: 5px"></i> Knowledge Base</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user-circle" style="padding-right: 5px"></i> Client Login</a>
</li>
</ul>
</nav>
Full Screen Screenshot:
https://i.sstatic.net/m3FE6.jpg
Reduced Width Screenshot:
https://i.sstatic.net/1Oh5T.jpg
Edit:
Upon investigating, Bootstrap seems to stack the <li> elements vertically when the resolution is reduced. Is there a way to prevent this behavior?