I have a question related to Top Bar and menu items that have white space when scaling a browser.
I've included a codepen example to demonstrate better the issue:
If you will notice, in the CSS that I used white-space:nowrap, in the dead center of the menu you'll see an item labeled WHITE SPACE.
If you'll go to the pen, above, and start scaling the width of your browser, you'll notice that the WHITE SPACE item will start to "push-through" its right border.
What I'm trying to achieve is:
1. Have menu items like the "WHITE SPACE" example keep the text on one line. (thus white-space:nowrap)
2. As the width of the browser grows smaller, instead of the menu item "WHITE SPACE" pushing through its border (or wrapping if you remove the white-space:nowrap css), simply have the menu switch to the mobile hamburger menu.
Any help with this?