Currently, I am attempting to modify the size of Twitter Bootstrap's standard navbar to a smaller dimension. My goal is to have the Brand/logo on the left side, menu options in the center, and social media icons on the right side within the navbar.
Up to this point, I have successfully aligned them as desired and managed to reduce the size accordingly. However, when the screen size decreases (e.g., mobile phones), the social icons end up next to the menu options instead of below them, resulting in an undesirable appearance.
I suspect there is something missing in the CSS/HTML that is causing the social icons not to position beneath the menu options. Any insights or suggestions would be greatly appreciated!
To see my progress so far and view the source code, please click on the following link:
Your assistance would be invaluable to me! Thank you in advance.