I am currently faced with an issue while creating a website using Bootstrap. Specifically, I have a prominent logo on the left side of my navbar and six navigation items on the right. When viewing the website on a smaller XS screen size, the navigation items collapse into a hamburger menu as intended. However, before collapsing, they end up floating below the logo, which is not the desired behavior.
If you would like to see a demonstration of this issue, please try resizing the webpage at the following link:
One suggested solution found on Stack Overflow was to adjust the collapse width. Nevertheless, I have discovered that this approach may not be optimal because different devices may have varying heights and zoom levels, making the fixed width unreliable across all platforms.
Could anyone provide guidance on the best practice to address this problem? Any insights or suggestions would be greatly appreciated. Thank you.