Bootstrap fixed nav links changing alignment

Question

This is for a BigCommerce site. I added a bootstrap fixed navbar that contains links and spans and divs. Not sure if I set the CSS up correctly but everything seems to be totally fine until I click one of the links...it's a Global Big Commerce Login/Logout link. Initially it appears as two links: "Sign in" or "Create Account" and they are aligned properly, no problem. When someone clicks either one and signs in the button then changes to "Sign Out". When it changes to Sign Out it bumps up a little bit and is no longer aligned properly. See screenshots below.

    %%GLOBAL_OptimizerLinkScript%%   
<link rel="stylesheet" type="text/css" href="%%GLOBAL_AppPath%%/javascript/jquery/themes/cupertino/ui.all.css?%%GLOBAL_JSCacheToken%%" />
   <div id="TopMenu" class="navbar navbar-fixed-top">
       <div class="navbar-inner">
       <div class="container">

              <ul class="nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#GiftsByType">Gifts By Type<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="GiftsByType">
                                 <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/wine-gifts/" title="View Wine Gifts">Wine Gifts</a></li>
                                 <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/tea-gifts/" title="View Tea Gifts">Tea Gifts</a></li>
                                 <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/gourmet-gifts/" title="View Gourmet Gifts">Gourmet Gifts</a></li>
                                 <li role="presentation" class="divider"></li>
                                 <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/spa-baskets/" title="View Spa Baskets">Spa Baskets</a></li>
                                 <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/corporate/" title="View Corporate">Corporate</a></li>
                                 <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/chocolate-lovers/" title="View Chocolate Lovers">Chocolate Lovers</a></li>
                           </ul>
                   </li>
                   <li class="dropdown">
                       <a class="dropdown-toggle" data-toggle="dropdown" href="#Occasions">Occasions<span class="caret"></span></a>
                           <ul class="dropdown-menu" role="menu" aria-labelledby="Occassions">
                                 <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/4th-of-july/" title="View 4th of July Gifts">4th of July</a></li>
                       </ul>
                   </li>
                   <li><a href="/">&nbsp;Home&nbsp;</a></li>
             </ul>    



            <ul class="nav" style="float: right;">               
                <div class="pull-right">
                  %%Panel.HeaderSearch%%
                </div> 
                <span>%%GLOBAL_LoginOrLogoutText%%</span> 
                <li><a href="%%GLOBAL_ShopPath%%/account.php">%%LNG_YourAccount%%</a></li>                  



                  <li class="CartLink" style="display:%%GLOBAL_HideCartOptions%%">
           <span><a href="%%GLOBAL_ShopPathNormal%%/cart.php" title="%%LNG_ViewCart%%"><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 15px; right: 35px;"></i><span class="badge badge-info" style="position: relative; top: 19px; right: 30px;">0</span></span></a>
                 </li>               
           </ul>
        </div>
      </div>
    </div>

CSS:

.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-left: 0;
  padding-right: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
   border-radius: 0;
}
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
.navbar-fixed-top {
  top: 0;
}
.navbar-fixed-bottom {
  bottom: 0;
}
.navbar .nav {
  position: relative;
  left: 0;
  display: block;
  float: left;
  margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
  float: right;
}    
.navbar .nav > li {
  float: right;
  margin-top: 0px;
}
.navbar .nav > li > a {
  float: none;
  vertical-align: middle;
  padding: 20px 15px 20px;
  color: #7d7d7d;
  font-family: 'Lora', serif;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  /*text-shadow: 0 1px 0 #ffffff;*/
}
.navbar .nav > li > a:hover {
  background-color: #e0e0e0;
  color: #888888;
  text-decoration: none;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
 background-color: #e0e0e0;
  color: #888888;
  text-decoration: none;
}
.navbar .nav > span {
 color: #7d7d7d;
  float: right;
  margin-top: 19px; 
  display: inline;

}
.navbar .nav > span > a {
  float: none;
  vertical-align: middle;
  padding: 20px 7px 20px 7px;
  color: #7d7d7d;
  font-family: 'Lora', serif;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
 /* text-shadow: 0 1px 0 #ffffff; */ 
}
.navbar .nav > a {
  float: right;
  margin-top: 18px;

}
.navbar .nav > a {
  float: none;
  vertical-align: middle;
  padding: 20px 8px 20px 8px;
  color: #7d7d7d;
  font-family: 'Lora', serif;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
 /* text-shadow: 0 1px 0 #ffffff; */ 
}
.navbar .nav > span > a:focus,
.navbar .nav > span > a:hover {
  background-color: #e0e0e0;
  color: #888888;
  text-decoration: none;
}

Answer 1

It seems I have figured this out myself...although likely more of a "work-around" than a legitimate fix.

Changed some alignment for the affected span in CSS. Changed vertical-align from middle to bottom and added a margin-top for .navbar .nav > span of 20px:

.navbar .nav > span {
  color: #ffffff;
  float: left;
  margin-top: 20px; 
  display: inline;
  }

.navbar .nav > span > a {
  float: none; 
  vertical-align: bottom;
  padding: 20px 7px 20px 7px;
  color: #7d7d7d;
  font-family: 'Lora', serif;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  /* text-shadow: 0 1px 0 #ffffff; */ 

}