Twitter Bootstrap responsive navbar title for small devices

Question

The title of the post is rather vague.. But the issue that I am having is that the responsive navbar that I have when at full width shouldn't have a 'brand' or 'title' on it. Only when the navbar is viewed on a smaller device ie in responsive mode should there be a brand on the navbar saying "Menu"...

Difficult to grasp so I created a JSfiddle also viewable in fullscreen mode there. I like the result when viewed in responsive mode but when in normal mode it looks messed up. The word "Menu" shouldn't be there then anymore, it's rather pointless then.

// Ignore this comment

Answer 1

It's actually quite easy to fix, check out this JSFiddle fork of your code: http://jsfiddle.net/sfAY6/

There's a set of utility CSS classes you can apply that controls visibility depending on device, for example hidden on desktop but visible on anything smaller.

So I modified your menu link to be like this:

<a class="brand hidden-desktop" href="#">Menu</a>

That will hide your menu anchor on any device deemed desktop but keep it visible on tablets and smartphones.

See here for more details: http://twitter.github.com/bootstrap/scaffolding.html#responsive