HTML navigation bar inline items on mobile - html

Question

This is my navigation bar (uses Bootstrap 4):
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
<a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
Cars
Engine
<button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 0px; right: 15px; top: 11px;">Log Out</button>
</div>
</div>
</nav>
So except the main title Cars Shop, there are three more items:
Cars (aligned from the left)
Engine (aligned from the left)
Log Out button (in the top right corner)
On desktop it looks good, but when I switch to mobile (or resize window appropriately), the three items disappear completely. Is there any way to make this navbar a bit more user friendly?

Answer 1

As far ad I understand the problem is that you are using a collapsed navbar without the ability to open it after it collapses. I fixed it like this for a collapsed menu (you will need to change up your style a bit to make it look good):
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
<a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-collapse collapse" id="navbarSupportedContent">
Cars
Engine
<button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 3em; right: 15px; top: 11px;">Log Out</button>
</div>
</div>
</nav>
I would also recommend doing the CSS in a separate file if you aren't already and maybe try to use em, vh, vw instead of px.