JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://github.com/codemix/bootstrap-css/blob/master/css/bootstrap.css">
<header id="header" class="navbar navbar-inverse">
<div id="top-header" class="row-fluid opaque-white-box">
<div id="top-header-right" class="span6">
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="arrow"></span>
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<div class="pull-right">
<ul class="unstyled" id="top-header-menu">
<li>
<a id="login-btn">Login</a>
</li>
<li>
<a href="">Wholesale</a>
</li>
<li>
<a href="">Checkout</a>
</li>
</ul>
<div id="logo-expand"></div><!-- ./ logo-expand -->
</div><!-- ./ pull right-->
</div><!-- ./ span6 top header right-->
</div><!-- ./ row fluid top header-->
</header>
CSS
#top-header-right{
height: 70px;
position: relative;
overflow: hidden;
width:500px;
border:1px solid red;
}
.pull-right{
float:right;
}
ul#top-header-menu{
height: auto;
display: table-cell;
vertical-align: middle;
width: auto;
padding-right: 10px;
}
ul#top-header-menu li{
display: inline;
padding: 5px;
font-size: 10px;
font-weight: bold;
}
#top-header-right #logo-expand{
display: table-cell;
vertical-align: middle;
width: 56px;
height: 100px;
background: url(http://www.psdgraphics.com/wp-content/uploads/2009/04/1-google-logo-tutorial.gif) no-repeat left center;
position: relative;
right: 0px;
}
JavaScript
$("#logo-expand").mouseenter(function() {
$(this).animate({
width: "56px;"
}, 300 );
});
$("#logo-expand").mouseleave(function() {
$(this).animate({
width: "170px"
}, 300 );
});