I'm using the side navigation
<body class="stretched side-header open-header push-wrapper close-header-on-scroll">
Is it possible to add the shopping cart so that it shows in the top right hand corner, instead of inside the side navigation bar? I've attached an image to shop what I mean?
Hello,
Yes ofcourse this is possible! Consider deleting the Cart Codes from inside the <header> and then use the following code just after the </header> Tag:
<div class="position-fixed top-0 end-0 mt-4 me-4 z-10">
<!-- Top Cart
============================================= -->
<div id="top-cart" class="header-misc-icon d-none d-sm-block mx-0">
<a href="#"><i class="icon-line-bag"></i><span class="top-cart-number">5</span></a>
<div class="top-cart-content top-100 end-0">
<div class="top-cart-title">
<h4>Shopping Cart</h4>
</div>
<div class="top-cart-items">
<div class="top-cart-item">
<div class="top-cart-item-image">
<a href="#"><img src="images/shop/small/1.jpg" alt="Blue Round-Neck Tshirt" /></a>
</div>
<div class="top-cart-item-desc">
<div class="top-cart-item-desc-title">
<a href="#">Blue Round-Neck Tshirt with a Button</a>
<span class="top-cart-item-price d-block">$19.99</span>
</div>
<div class="top-cart-item-quantity">x 2</div>
</div>
</div>
<div class="top-cart-item">
<div class="top-cart-item-image">
<a href="#"><img src="images/shop/small/6.jpg" alt="Light Blue Denim Dress" /></a>
</div>
<div class="top-cart-item-desc">
<div class="top-cart-item-desc-title">
<a href="#">Light Blue Denim Dress</a>
<span class="top-cart-item-price d-block">$24.99</span>
</div>
<div class="top-cart-item-quantity">x 3</div>
</div>
</div>
</div>
<div class="top-cart-action">
<span class="top-checkout-price">$114.95</span>
<a href="#">View Cart</a>
</div>
</div>
</div><!-- #top-cart end -->
</div>This will definitely work fine. However, this will currently not work on Responsive Devices as the Default Layout does. We will make this more flexible in the next update. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard