Rock5 Posted July 24, 2014 Share Posted July 24, 2014 Hello to everybody, I have just registered in the forum, though found a hundred of solutions to customization of my new shop in the forum during last few days But got stuck now trying to get 100% width in my top horizontal menu. I mean I want the background of the top menu (that I successfully changed) to be full width. Tried every trick, but it doesn't work I think I previously managed to change header width to 100%. http://www.cypopet.com/shop/en/ I did find a solution here http://www.prestashop.com/forums/topic/2602[spam-filter]solved-full-width-header-and-top-horizontal-menu/, but it seems to be not applicable to Prestashop 1.6. I use default bootstrap theme. Thank you very much in advance. Link to comment Share on other sites More sharing options...
vekia Posted July 24, 2014 Share Posted July 24, 2014 in your global.css stylesheet file use this: header { background: url('http://i.imgur.com/tkY5gPZ.png') top !important; } effects: Link to comment Share on other sites More sharing options...
Rock5 Posted July 24, 2014 Author Share Posted July 24, 2014 Vekia, you are a good angel! Thank you so much!! Link to comment Share on other sites More sharing options...
71newyorker Posted January 10, 2015 Share Posted January 10, 2015 Hi Vekia, I also want to make my menu bar 100% width (the top horizontal navigation bar). My demo site is back.babyoutlet.ph im using default theme 1.6.0.11 Can you tell me the easiest way to do this? Im looking for a method that wont ruin my mobile or tablet design because right now everything is perfect Thank you Link to comment Share on other sites More sharing options...
vekia Posted January 10, 2015 Share Posted January 10, 2015 Hi Vekia, I also want to make my menu bar 100% width (the top horizontal navigation bar). My demo site is back.babyoutlet.ph im using default theme 1.6.0.11 Can you tell me the easiest way to do this? Im looking for a method that wont ruin my mobile or tablet design because right now everything is perfect Thank you in this case it will be necessary to alter container width value .container { max-width: 1170px; } change it to 100% effect: Link to comment Share on other sites More sharing options...
Mr.Bean_S Posted January 10, 2015 Share Posted January 10, 2015 Is there an easy way to get the whole site to be 100%?Today it looks like this http://webshop.bean-bag.se/sv/ Naturally I'd prefer if it was 100% instead and adjusted to the visitors screen size. Have a development page to test on. Link to comment Share on other sites More sharing options...
vekia Posted January 10, 2015 Share Posted January 10, 2015 global.css line 989 change 1170px; to 100%; in: .container { max-width: 1170px; } 1 Link to comment Share on other sites More sharing options...
Mr.Bean_S Posted January 10, 2015 Share Posted January 10, 2015 global.css line 989 change 1170px; to 100%; in: .container { max-width: 1170px; } Oh my, that seems to work just like I wanted. Need to check everything before I go live. Link to comment Share on other sites More sharing options...
vekia Posted January 10, 2015 Share Posted January 10, 2015 :-) don't forget to share url to your shop in http://www.prestashop.com/forums/forum/136-feedback-on-my-store/ section :-) Link to comment Share on other sites More sharing options...
Mr.Bean_S Posted January 11, 2015 Share Posted January 11, 2015 (edited) :-) don't forget to share url to your shop in http://www.prestashop.com/forums/forum/136-feedback-on-my-store/ section :-) Do I just start a new topic there and ask for comments, suggestions? Why not, and I could do the change on my live shop now that I have noticed that nothing was affected in a bad way. BUT, I changed to 98% since that was easier than figuring out how to set left margin for shit on the pages. What I REALLY like with this change are the product pages, Now I might need to create larger product images since they show very nicely now and no need to enlarge anymore. Still, it's to bad the Ads & Slideshow from PrestaModule doesn't respond responsive like the rest of the stuff. Might need to ask them how to solve this. You can't set %, just px as far as I can see. Perhaps the problem is that it's in the Top hook instead of the home hook? But when I place it in the home hook it displays in the bottom and I have not found how to change that. It does work on their reference page anyhow. http://www.universol.fr/ My page link is http://webshop.bean-bag.se/sv/ and if you wonder what I meant with the size of product page you can see how big pictures get here: http://webshop.bean-bag.se/sv/sittsackar/47-sit-on-it-change-me.html Seems to me that even if the original picture is crystal sharp in same size PS does something to make quality worse (reduce file size perhaps?). Edited January 11, 2015 by Mr.Bean_S (see edit history) Link to comment Share on other sites More sharing options...
71newyorker Posted January 12, 2015 Share Posted January 12, 2015 (edited) On 1/10/2015 at 9:25 PM, vekia said: in this case it will be necessary to alter container width value .container { max-width: 1170px; } Thank you Vekia, one last question regarding that. If i use that code, my text also changes to 100%. Is there a way i can make the grey background bar in the top navigation 100% width but the text and drop down wont change width. I literately only want the grey background to change width. Is this possible? Many thanks. Edited February 11, 2020 by 71newyorker (see edit history) Link to comment Share on other sites More sharing options...
Mr.Bean_S Posted January 12, 2015 Share Posted January 12, 2015 Thank you Vekia, one last question regarding that. If i use that code, my text also changes to 100%. Is there a way i can make the grey background bar in the top navigation 100% width but the text and drop down wont change width. I literately only want the grey background to change width. Is this possible? Many thanks. But isn't the change of textsize necessary if ppl use different screen resolutions when visiting the site? With a fixed text size the text would look huge if they have low resolution and so small they can't read it with a high resolution. Link to comment Share on other sites More sharing options...
71newyorker Posted January 13, 2015 Share Posted January 13, 2015 (edited) Got to see how it all works Edited February 11, 2020 by 71newyorker upp (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts