Struggling to create a unique navigation bar design with fixed elements on both the left and right sides. The challenge arises when scaling down to mobile, as the icons on the right end up stacking. Any suggestions on how to resolve this issue?
<div className="container">
<nav role="navigation" class="navbar navbar-light bg-faded navbar-toggleable-sm">
<button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon" />
</button>
<a class="navbar-brand mx-auto" href="/">
HOMF
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<i class="fas fa-search" />
</li>
<li class="nav-item">
<i class="fas fa-shopping-cart" />
</li>
</ul>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto text-center">
<li className="nav-item">
<NavLink to="/" className="nav-link">
MENS
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/" className="nav-link">
WOMENS
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/" className="nav-link">
KIDS
</NavLink>
</li>
</ul>
</div>
</nav>
</div>