I decided to use Bootstrap 4 for my responsive website, and I implemented its responsive Navbar component based on the instructions provided in this Bootstrap documentation. While the navbar functions properly on desktop, it seems to break on mobile devices and I'm struggling to identify the root cause.
Here is a visual representation of the issue: https://i.sstatic.net/8tnTd.png
This is how I envision it should appear: https://i.sstatic.net/YlyZi.png
Below is a snippet of my code:
<nav class="navbar navbar-expand-lg nl-navbar navbar-light">
<a class="navbar-brand" href="#">
<img src="#" alt="Logo" class="col-lg-7 col-md-6
col-sm-5 col-5"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto nl-navbar-ul">
<li class="nav-item active">
<a class="nav-link mr-3" href="#">Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link mr-4" href="#">Link 2</a>
</li>
<li class="nav-item active">
<a class="nav-link mr-4" href="#">Link 3</a>
</li>
<button class="btn my-2 my-sm-0 nl-btn-nav-secondary" type="button" data-
toggle="modal" data-target="#"
id="#">Btn Here</button>
</ul>
</div>
</nav>