Problem with cart block in navblock

Hi there, I saw you posts on the forum and you seem to be very skilled with prestashop and helpful. I moved my cart to the navblock, although its not in same line with "contact us" I kinda like it just slightly above the logo-header as it is. However, I am faced with 2 problems: the 1st is that when viewed on a mobile device the cart block is no longer responsive, hence one has to move to the right to see it. 2nd issue is that the cart now blocks the sign-in and contact us, hence one cannot click on them any more. Would you be able to assist me to fix these in anyway? The problem you can see on the image below:
problem with block cart module

Stephen

PrestaShop expert answer

Hi Stephen,

I inspected your website and I see that it is based on default-bootstrap responsive theme.  That's great, because it will be easy to fix. Your problem is related to two things. I will describe them below. Unfortunately, it will be necessary to modify the css code in your shop, and also .tpl file of blockcart module.

1. Move module to correct position.

Make sure that block cart module is before the module "block user info" on modules list called "displayNav". Just go to modules > positions section in your shop back office. Search there for "displayNav" modules list. Move block cart module BEFORE the block user info module.

 

2. modification of block cart template file (.tpl)

Please open your theme directory and go to /modules/blockcart/blockcart.tpl file. This file is responsible for appearance of cart module block. You can find there code like:

<div class="col-sm-4 clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">

change it to:

<div class="col-sm-4 clearfix pull-right {if $PS_CATALOG_MODE} header_user_catalog{/if}">

 

3. Styles modification

Okay, now we have to alter styles of two modules. First will be blockuserinfo addon that adds "sign in" button. We have to change its appearance a little. Please open file: /themes/your-theme/css/modules/blockuserinfo/blockuserinfo.css and remove margin-rgiht: -40px  from code: 

.header_user_info {
    float: right;
    margin-right: -40px;
}

 

Now it's time to cart block module styles. I've found some weird css styles, that arent responsive. This can cause some problems with responsiveness and also with appearance of the block. You have to remove these styles from blockcart.css file. File is located in your theme directory, inside subfolder css/module/blockcart.css. So please edit this file and remove code:

#header .shopping_cart {
     position: absolute;
     float: none;
     padding-top: 48px;
     left: 765px;
}
author milos myszczuk
Answer by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation