I believe there a number of online mobile emulators that you can test your pages in, which you might Google for.

Quote

Erm.. I certainly wouldn't consider this as a first option!! In fact, it would be my last consideration - it changes the structure and behaviour of the whole page.

if that is an issue directed to mobile devices, you need to test your code directly. just making the browser window smaller is not the same (because mobile devices have different default settings for (e.g.) font-size).

besides that, there are some extended CSS selectors that allow to assign rules depending on the available space. MDN or W3C should have something on that topic.

er, I don’t see the text in the list shrink either. all I can see is the first item encountering a word break (because there is a space that allows for that). all other items still fit in the width.
and since you only change the width of the window, I see no reason why the text itself should get smaller.
that the h5-heading overflows is just a CSS default setting.

Depends on how you create it. If done correctly, a horizontal bar at the top of the page isn't that annoying. Though you have to make sure the content will never get "stuck" underneath it; that any content is padded far enough down that even when scrolled all the way at the top, it won't overlap the nav bar. You also need to make sure you remove it on mobile devices. Those screens are small enough already without that eating up screen real estate.

A sidebar is also not too bad, as long as you avoid any sort of elastic or springy animation effects. Those are kind of cool for about 5 seconds. Then they become annoying. Just fix it with CSS and leave it at that.