Hide bootstrap navbar brand and only display centered when navbar is collapsed

Question

Perhaps the brand navbar button isn't the way to do this, but when I would like is when the navbar collapses and displays the toggle button I would like some text or the home page link to appear.

Like this:

I'd like the brand to be hidden when the navbar is not collapsed. Is this possible?

Answer 1

This is fairly easy to do using some of the bootstrap utility classes. By default, the navbar collapses at XS (<768px).

To have something appear only when you get to XS just add the visible utility class for that size.

<div class="visible-xs"></div>

If you want something to show only when you are not in XS as the hidden utility class for that size.

<div class="hidden-xs"></div>

More info can be found here: http://getbootstrap.com/css/#responsive-utilities-classes