Foundation add shopping cart
I am trying to show a shared cart in the top bar of the bottom. at the moment I have the code below. The total amount of the telegram is displayed on large screens, but the menu on smaller ones. Is there a way to override the top section so that the total of the cart is always displayed and does not become a menu on smaller devices. Thanks to
<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>
source to share
I wonder if you can move your cart outside of ul.right and .top-bar-section? if so, it is fairly easy to set the absolute position of the position and hold it to the right at every resolution.
[http://jsfiddle.net/d6g6fbyo/1/][1]
As far as the question itself is concerned, is it possible to keep a trash bin on each screen with the current markup by only rewriting some of the styles, I really doubt it.
In a small cut, the .top-bar-section wraps the next line, while the .top-bar loses the overflow: apparently this results in the content of the .top-bar-section never being seen unless javascript toggle the overflow : apparently. thus, it makes it impossible to position the cart back into view within that unfortunate .top-bar segment.
source to share