Looking to utilize the Twitter Bootstrap framework for structuring my navbar with distinct "left", "middle", and "right" sections, where the middle portion collapses beneath the navbar-toggler (burger menu) when space is limited.
For a self-contained example, check out this Codepen: https://codepen.io/fiver/pen/eKJOMG
My current struggle lies in defining the "icon" elements correctly:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark ">
<a className="navbar-brand" href="#">ExampleApp</a>
<button className="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarNav" >
<span className="navbar-toggler-icon"/>
</button>
<a className="navbar-brand navbar-right" href="#">Icon1</a>
<div id="navbarNav" className="collapse navbar-collapse" >
<ul className="navbar-nav">
<li nav items></li>
....
</ul>
</div>
<a className="navbar-brand navbar-right" href="#">Icon2</a>
</nav>
When the horizontal space is sufficient and the navbar-toggle is unnecessary, Icon1 seems to be misplaced:
https://i.sstatic.net/5lvCO.png
Conversely, when the navbar-toggler is activated and the menu expands, Icon2 appears to be in the incorrect position:
https://i.sstatic.net/RFaOI.png
Currently, the plan is to incorporate only one of the Icon menu items in my application. The inclusion of two icons is solely for demonstrating the differing behaviors based on their placement.
Interestingly, both positions appear to function correctly when the navbar-toggler menu is active but collapsed:
https://i.sstatic.net/kpkUE.png
Any suggestions on how to achieve the desired behavior of positioning the icon like Icon2Icon1