Bootstrap collapsible button pushing brand element down - html

Question

I'm using the navbar example:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Create Single Page</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
But when the screen enters 261px in width, the collapsible button pushes down the title of the site, making things awkward looking. I tried wrapping the "a tag" with a column but just puts a word break.

Answer 1

261px is extremely narrow -- very few modern devices are so low-resolution, and users generally do not expect a site's content to be usable or readable at this size.
So I'd recommend either ignoring the issue entirely (like Bootstrap itself does) or setting a minimum width in CSS like this (depending on the rest of your markup and styles, you may want to change body to a selector for your outermost container):
body {
min-width: 280px;
}
Which will add horizontal scrollbars when the page width goes below 280px, instead of attempting to be responsive to so far down a size.
If you absolutely must support a view this narrow, you could add new media queries to the CSS like:
#media screen and (max-width: 270px) {
// tiny styles for your site logo here, e.g.:
.navbar-brand {
font-size: 0.5em;
}
}
...to size down the title as needed.