 <p>You can try moving <code>&lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;</code> from after the <code>&lt;/button&gt;</code> tag to the line after <code>&lt;ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;"&gt;</code>.</p> <pre><code>&lt;ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;"&gt; &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; </code></pre> <p>It worked for me.</p> <p>However, note that this change will prevent the text 'Brand' from displaying in small screens by default, as it is now outside the <code>&lt;navbar-header&gt;</code> class. It is part of the <code>collapse</code> group now.</p> <p>Additionally, if you wondered about this solution appearing strange... well. I find using an <code>a</code> tag under a <code>ul</code> weird too.</p> <p>EDIT: <code>&lt;li class="navbar-brand"&gt;&lt;a href="#"&gt;Brand&lt;/a&gt;&lt;/li&gt;</code> works too.</p>