Sorry if this seems like a basic inquiry, but I'm still learning about bootstrap 4 and haven't had any luck finding the solution online.
My issue involves a navigation bar with three columns: logo on the left, small menu in the center, and a logout button on the right. However, when the screen size shrinks to between 550px and 767px, instead of wrapping onto a new line, everything just gets compressed and spills off the page. I've tried disabling styles in the console without success. The only workaround I found was removing the navbar class from the navigation element, but that messes up the layout on other screen sizes, so it's not a viable fix.
Below is my HTML code. Can anyone guide me in the right direction? I aim for a design similar to this (logo above menus):
Logo
Menu 1 | Menu 2 | Menu 3 | Menu 4 Logout
html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Name
</a>
<div class="dropdown-menu text-center dropdown-logout" aria-labelledby="navbarDropdown">
<form action="" method="post">
<button type="submit" class="btn btn-primary">Logout</button>
</form>
</div>
</li>
<li class="nav-item">
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link btn-ghost-blue" href="/#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link btn-ghost-blue" href="/#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link btn-ghost-blue" href="/#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link btn-ghost-blue" href="/#">Menu 4</a>
</li>
</ul>
</div>
</div>
</nav>Appreciate your help!