如何讓菜單可以越過徽標？

在與Twitter的引導寶石我的Ruby on Rails的施普雷應用程序安裝的我有我的頭下面的代碼：如何讓菜單可以越過徽標？

<body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body"> 

<%= render :partial => 'spree/shared/header' %> 
(...) 
</body>

在哪裏共享/頭看起來如下：

<div class="container header"> 

    <header id="header" data-hook> 
     <div class="container"> 
      <figure id="logo" class="text-center col-md-4" data-hook> 
       <%= logo('store/Logo.png') %> 
      </figure> 
      <%= render :partial => 'spree/shared/nav_bar' %> 
      <%= render :partial => 'spree/shared/main_nav_bar' if store_menu? %> 
     </div> 
    </header> 


</div>

標誌是加載在figure標記中。

我想要做的是徽標將向下延伸併成爲背景的一部分。例如，

Like this 。

我該如何做到這一點？我是否需要將它作爲標題和正文的背景的一部分？或者我應該在整個頁面上使用CSS背景？如果是這樣，我怎麼能讓它重新調整頁面？

我希望有人能指引我正確的方向！

/編輯生成的HTML：

<body class="one-col" id="default" data-hook="body"> 

    <div class="container header"> 

    <header id="header" data-hook> 
     <div class="container"> 
      <figure id="logo" class="text-center col-md-4" data-hook> 
       <a href="/"><img alt="Logo" src="/assets/store/Logo-c0fd8c5c71ef79825dba0315b84bdef5.png" /></a> 
      </figure> 

    <ul id="nav-bar" class="nav navbar-nav navbar-right" data-hook> 
<li><a href="/account">My Account</a></li> 
    <li><a href="/logout">Logout</a></li> 
<li id="search-bar" data-hook> 
     <form accept-charset="UTF-8" action="/products" class="navbar-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div> 

<div class="form-group"> 
    <input class="form-control" id="keywords" name="keywords" placeholder="Search" type="search" /> 
</div> 
<input class="btn btn-success" type="submit" value="Search" /> 
</form> 
</li> 
    </ul> 
      <nav class="col-md-12"><div id="main-nav-bar" class="navbar"> 
    <ul class="nav nav-pills navbar-nav" data-hook> 
<li id="home-link" data-hook><a href="/">Home</a></li> 
     <li id="shop-link" data-hook><a href="/shop">Products</a></li> 
     <li id="about-link" data-hook><a href="/about">About us</a></li> 
     <li id="contact-link" data-hook><a href="/contact">Contact</a></li> 
    </ul> 
<ul class="nav navbar-nav navbar-right" data-hook> 
<li id="link-to-cart" data-hook><a class="cart-info empty" href="/cart"><span class='glyphicon glyphicon-shopping-cart'></span> Cart: (Empty)</a></li> 
    </ul> 
<div id="locale-select" style="float: right; margin-right: 10px;" data-hook> 
    <form accept-charset="UTF-8" action="/locale/set" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mx8tcgWHDqyVslG5Fxvz6N03KRhtVtr9eXYyqDJpEhQ=" /></div><select class="form-control" data-href="/locale/set" id="locale" name="locale"><option selected="selected" value="en">English (US)</option> 
<option value="nl-NL">Nederlands (NL)</option></select><noscript> 
     <input name="commit" type="submit" value="Save changes" /> 
</noscript> 
</form></div> 
</div> 
</nav> 
     </div> 
    </header> 


</div> 

    <div class="container row" style="margin: 0 auto;" data-hook> 
    <.. MAIN CONTENT> 
    </div> 
</body>

來源

2014-02-26 Erwin Rooijakkers

如果您發佈在線演示，或者至少張貼生成的HTML，則更容易提供幫助。 –

@ ralph.m，現在的問題包含生成的html。 –