I'm looking for a way to make my Bootstrap 4 navbar non-responsive with the toggler. Here is the issue I'm facing:
Current Navbar in big screen: https://i.sstatic.net/e3f3p.png
Navbar in mobile view:https://i.sstatic.net/7jMi5.png
What I want is for the navbar to stay on the right side of the Navbar brand even in mobile view, and it's okay if I need to use "overflow: hidden" for elements that overflow to the right.
How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Bug Report</title>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="home" style="padding-top:100px">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav ml-auto" style="flex-direction: row;">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Other</a>
</li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>
</html>