Bootstrap 3 navbar-brand logo shifting navigation links in FireFox 31.0

Question

I'm having this problem in Firefox 31.0 where, when I scale down my browser to the mobile version and click on the drop down icon my navigation items will then shift to the right of my logo. This is not a issue with Chrome or Safari this only resides with Firefox 31.0. I'm using the latest build from Bootstrap v3.2.0. I've pasted my HTML and CSS to this post for reference.

CSS

#logo
{
    height: 100%;
      margin-top: 5px;
}
.navbar-nav
{
    padding-top: 7px;
}
.navbar
{
    top:-100px;
}
.navbar-brand
{
    padding: 0px;
}
.navbar
{
    min-height: 62px;
}
.navbar-toggle
{
    margin-top: 13px;
    margin-bottom: 12px;
}
.navbar-inverse .navbar-toggle {
  border-color: #000;
}

.navbar-inverse .navbar-nav li
{
    margin-right:14px;
}
.navbar-inverse .navbar-nav li a
{
    font-family: 'MuseoSans700', Verdana, Arial, TimesNewRoman;
    letter-spacing: 0.3px;
    font-size:13px;
}
.navbar-inverse {
  background-color: #000;
  border-color: #000;
}
.navbar-inverse
{
  background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(to bottom, #000 0, #000 100%);
}
.navbar-inverse .navbar-nav > li > a
{
    color: #ffffff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus
{
    color:#545454;
}
.navbar-inverse .navbar-nav > li > a:active
{
    color:#545454;
}

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#" target="_self">
                <img id="logo" src="images/canyon_logo.png" alt="logo">
            </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navBarCollapsed">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navBarCollapsed">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">CASE STUDIES</a>
                        </li>
                        <li>
                            <a href="#">ABOUT US</a>
                        </li>
                        <li>
                            <a href="#">CONTACT</a>
                        </li>
                    </ul>
            </div>
        </div>
</div>

Thanks,

Abel

Answer 1

You need to logo & toggle button add in <div class="navbar-header">....</div> Use following HTMl & check it.

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
        <a class="navbar-brand" href="#" target="_self">
            <img id="logo" src="images/canyon_logo.png" alt="logo">
        </a>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navBarCollapsed"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    </div>
    <div class="collapse navbar-collapse navBarCollapsed">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">CASE STUDIES</a> </li>
        <li> <a href="#">ABOUT US</a> </li>
        <li> <a href="#">CONTACT</a> </li>
      </ul>
    </div>
  </div>
</div>