I'm facing an issue with my navbar design. Currently, I have a navigation bar with a toggle button that collapses the menu on smaller screens. However, I want to prevent a specific element, which I refer to as the "army of shopping carts", from collapsing when the screen size is reduced.
Here's an illustration of what I'm trying to achieve:
https://i.sstatic.net/5iB2D.png
Despite searching for solutions and experimenting with code, I haven't been able to achieve this effect yet. Here is a link to the JSFiddle containing the relevant code snippet.
Snippet of Code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home<span class="sr-only">(current)</span></a>
</li>
/* Other navigation items omitted for brevity */
</ul>
</div>
<div class="d-flex order-lg-1 ml-auto pr-2">
<a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
<a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
<a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
</div>
</nav>
This issue resembles a problem discussed in this stackoverflow thread. However, the uniqueness of my case lies in the specific ordering of elements within the navbar structure.