ableier Posted July 18, 2015 Share Posted July 18, 2015 (edited) Before I updated I had the shop looking exactly as the client wanted it. After I updated to 1.6.1 I've had some work to do, but am getting close to the original look. I cannot figure out how to center the logo and resize it to full width without it messing with the rest of the layout. I've tried copying the code from header.tpl and inserting into blocksearch-top.tpl to no avail. Any other ideas would be greatly appreciated. Edited July 21, 2015 by ableier (see edit history) Link to comment Share on other sites More sharing options...
chome4 Posted July 21, 2015 Share Posted July 21, 2015 (edited) There is 'global.css' at ....\prestashop\themes\default-boostrap\css\global.css Line 703 .col-sm-4, header .row #header_logo { width: 33.33333%; } The logo is 'forced' to occupy one third of the total space of the page. If you remove 'width:33.33333%', the logo will take on the size of the original image. If you are going to look at this file, make sure you look at a backup copy. I don't think it is advisable to make too many changes here as things may be affected during upgrades. Once again, backup global.css! I have issues with this myself. I want to have a larger logo and position it where I want but there's a lack of information out there... Edited July 21, 2015 by chome4 (see edit history) Link to comment Share on other sites More sharing options...
ableier Posted July 21, 2015 Author Share Posted July 21, 2015 Hi Chrome4, I originally had changed the row size as you suggest, but it messed with the layout of my product page. I hope you don't have the same problem. My solution, which seems to have worked perfectly is to add the following to global.css: #header_logo .img-responsive { display: block; max-width: 800px; height: auto; position: relative; margin-left: 50%; margin-top: 40px; margin-bottom: 40px; } @media (max-width: 450px) { /*Change max-width to the maximum mobile screen size*/ #header_logo .img-responsive { max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/ } } @media (max-width: 750px) { /*Change max-width to the maximum mobile screen size*/ #header_logo .img-responsive { max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/ } } I pieced this together from a few different posts. Continue to add the @media lines for different screen sizes. I'm going to mark this solved, but let me know if it works for you. Thanks. Link to comment Share on other sites More sharing options...
chome4 Posted July 22, 2015 Share Posted July 22, 2015 I added it at line 21 and it's looking better http://www.gibraltaraccountants.eu/prestashop/ Obviously I'll have to play around with the logo width and/or the cart/search positions but it's good. It works responsively for smartphones and tablets. My earlier post about removing the width actually messed up the footer. Glad I followed my own advice and backed it up. Thanks for that. Link to comment Share on other sites More sharing options...
kuipje Posted September 13, 2015 Share Posted September 13, 2015 Hi Chrome 4, Thanks for your contribution , it has helped me tremendously. Gr. Kuipje Link to comment Share on other sites More sharing options...
kuipje Posted November 3, 2015 Share Posted November 3, 2015 Hi, Use margin: 0 auto; instead of margin-left: 50%; Gr. Kuipje Link to comment Share on other sites More sharing options...
Arnaudf Posted January 11, 2016 Share Posted January 11, 2016 Hi I added Ableier's code at line 21, and used margin: 0 auto; instead of margin-left: 50%; as suggested by Kuipje. I see that it did something because there is now slightly more space between the logo and menu bar, but…. my logo stays on the left… Is there something else I need to do? Do I need to modify smthg around col-sm-4, header .row #header_logo? Please help ! This logo on the left is killing me…. Thanks Link to comment Share on other sites More sharing options...
tiendaparapruebas Posted May 3, 2016 Share Posted May 3, 2016 Link to comment Share on other sites More sharing options...
tvc Posted October 10, 2017 Share Posted October 10, 2017 Hi Chrome4, I originally had changed the row size as you suggest, but it messed with the layout of my product page. I hope you don't have the same problem. My solution, which seems to have worked perfectly is to add the following to global.css: #header_logo .img-responsive { display: block; max-width: 800px; height: auto; position: relative; margin-left: 50%; margin-top: 40px; margin-bottom: 40px; } @media (max-width: 450px) { /*Change max-width to the maximum mobile screen size*/ #header_logo .img-responsive { max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/ } } @media (max-width: 750px) { /*Change max-width to the maximum mobile screen size*/ #header_logo .img-responsive { max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/ } } I pieced this together from a few different posts. Continue to add the @media lines for different screen sizes. I'm going to mark this solved, but let me know if it works for you. Thanks. Hello, i added this to my global.css and there were no noticeable changes to my site (locally hosted at the moment). Link to comment Share on other sites More sharing options...
Recommended Posts