(Bootstrap) nav bar struggles on xs width

[siruguri]

So the basic issue is that the text we have won't fit on small widths ... for example my 5 year old Samsung Focus.

It's tricky ... basically, Bootstrap just wraps a ul list in a div, and that list will spill across lines, if the text doesn't fit.

Thoughts on how to address? Potential solutions:

• Remove the Home link: The view could insert a hidden-xs into the first li item, or the application controller could.
• Does Bootstrap have some mixin or something that pops elements beyond the width into a dropdown?

[sunnyrjuneja]

The resolution of the Samsung Focus is 480 x 800 pixels (source). The lowest target I chose for a phone is 720p which it fits perfectly.

Bootstrap has hamburger menus but I would have to make a specific media query for phones under 720p. Jessica opted out of hamburger menus because usually research shows users don't understand them.

I can convert the menu bar to EMs but older browsers don't have great support.

My inclination is set it as "won't fix" but its really up to you.

[siruguri]

I'll defer to Jessica's wisdom on hamburger menus - let me fix it by sending a flag from the controller on which menu items are optional and having the view hide the optional ones in xs width.

On Thu, Jul 17, 2014 at 4:14 PM, Sunny Juneja notifications@github.com wrote:

The resolution of the Samsung Focus is 480 x 800 pixels (source http://www.gsmarena.com/samsung_focus-3453.php). The lowest target I chose for a phone is 720p which it fits perfectly.

Bootstrap has hamburger menus but I would have to make a specific media query for phones under 720p. Jessica opted out of hamburger menus because usually research shows users don't understand them.

I can convert the menu bar to EMs but older browsers don't have great support.

My inclination is set it as "won't fix" but its really up to you.

— Reply to this email directly or view it on GitHub https://github.com/lynco/GetThroughThis/issues/8#issuecomment-49378635.