2015-08-03 54 views
3

我試圖在基礎頂部欄中顯示購物車總數。目前我有下面的代碼。 購物車總計在大屏幕上顯示爲總計,但在較小的顯示屏上顯示一個菜單。 有沒有辦法覆蓋頂部,使購物車總是始終顯示,並且不會成爲較小設備上的菜單。 感謝粉底添加購物車總計

<nav class="top-bar" data-topbar> 
    <ul class="title-area"> 

     <li class="name"> 
      <h1><a href="#">Top Bar Title</a></h1> 
     </li> 
     <li class="toggle-topbar menu-icon"> 
      <a href="#"><span>menu</span></a> 
     </li> 
    </ul> 
    <section class="top-bar-section"> 
     <ul class="left"> 
      <li> 
       <a href="#">Link 1</a> 
      </li> 
      <li> 
       <a href="#">Link 2</a> 
      </li> 
     </ul> 
     <ul class="right"> 

      <!-- ################## --> 
      <li> 
      <?php echo $cart; ?> 
      </li> 

     </ul> 
    </section> 
</nav> 

回答

2

我不知道你是否可以在ul.right和.TOP酒吧節之外將你的車?如果是這樣,那麼很容易設置絕對位置,並在每個分辨率上將其固定在右側。

[http://jsfiddle.net/d6g6fbyo/1/][1] 

就問題本身是否有可能保持車每個屏幕上與當前的標記只覆蓋一些風格,我真懷疑如此。

在小分辨率下,top-bar-section會覆蓋下一行,而.top-bar會丟失溢出:可見,導致該人永遠不會看到.top-bar-section的內容,除非javascript將切換回溢出:可見。因此無法將購物車放回該不愉快的頂部欄杆部分的可視範圍內。