粉底添加购物车总计

Question

我试图在基础顶部栏中显示购物车总数。目前我有下面的代码。 购物车总计在大屏幕上显示为总计，但在较小的显示屏上显示一个菜单。 有没有办法覆盖顶部，使购物车总是始终显示，并且不会成为较小设备上的菜单。 感谢

<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> 

Answer 1

我不知道你是否可以在ul.right和.TOP酒吧节之外将你的车？如果是这样，那么很容易设置绝对位置，并在每个分辨率上将其固定在右侧。

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

就问题本身是否有可能保持车每个屏幕上与当前的标记只覆盖一些风格，我真怀疑如此。

在小分辨率下，top-bar-section会覆盖下一行，而.top-bar会丢失溢出：可见，导致该人永远不会看到.top-bar-section的内容，除非javascript将切换回溢出：可见。因此无法将购物车放回该不愉快的顶部栏杆部分的可视范围内。