I am currently using Bootstrap 4 and trying to create a navbar with three items. I want the brand to be on the left and the navbar-nav items on the right.
While this part is simple to achieve, I am facing an issue where I want an additional section to be aligned to the left, next to the brand.
Everything looks good when the screen is large (as shown below).
https://i.sstatic.net/KBktB.gif
However, my problem arises when the screen size decreases. The third item in the navbar moves to the center and I can't seem to figure out why.
https://i.sstatic.net/Q9H3t.gif
According to the documentation, using flex behaviors might solve this issue, but nothing I have tried has worked so far.
Is there a way to achieve this layout without any additional customization?
I have created a demo on codeply, which can be viewed here:
As you can see, when the viewport is large, the "example.com" button appears on the left. However, when the screen size decreases and the menu items collapse, the button jumps to the center of the screen.
I am aiming to keep the button aligned to the left, next to the brand.