I am new to Bootstrap and am attempting to configure a simple responsive navbar but I have run into an issue.

When I run the code in Chrome it runs just fine and everything looks like it should.

However, when I run the same code in IE or Firefox the collapsed menu gets messed up and appears in the center of the screen rather than starting below the brand.

Here is the code from the body of my program:

<!-- language: lang-html -->

<div class="navbar navbar-default navbar-static-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="navbar-brand">
                Brand
            </div>

            <button type="button" class="navbar-toggle" 
                    data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

I have been following a couple tutorials on Youtube and they all seem to lay it out like this and I always run into the same issue. Is this something that has changed with Bootstrap 3.0.3?

You need to specify a .navbar-header class div around your brand and toggle button, like this:

<!-- language: lang-html --> <pre><code><b>&lt;div class=&quot;navbar-header&quot;&gt;</b><br/> &lt;div class=&quot;navbar-brand&quot;&gt;Brand&lt;/div&gt;<br/> &lt;button class=&quot;navbar-toggle&quot; type=&quot;button&quot;<br/> data-target=&quot;.navHeaderCollapse&quot; data-toggle=&quot;collapse&quot;&gt;<br/> &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;<br/> &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;<br/> &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;<br/> &lt;/button&gt;<br/>&lt;/div&gt; </code></pre>

Demo in jsFiddle

Works Everywhere:

---

PS: What .navbar-header is doing is adding clear:both after the header so that floated elements will be pushed down.

Since IE and Chrome sometimes treat floats differently, this accounts for the difference.