JRFerreira Posted October 17, 2014 Share Posted October 17, 2014 Hi there, I'm using the default PS 1.6 theme, and everything works on my pc. But when i test my site on different browsers, in some, the top menu bar slips in two as show in the pic. http://grab.by/BlBs Since the theme is responsive, how can i solve this problem? :\ Best regards Link to comment Share on other sites More sharing options...
PascalVG Posted October 17, 2014 Share Posted October 17, 2014 I think BECAUSE it's responsive, it does this. It adjusts to the width that it has and brings menu items over to a second line when it doesn't fit on the width given. If you have many menu items, even on the PC sized width it might use two rows, as it just doesn't fit on one. Try on your PC to slowly narrow the width of your browser and see what happens: The whole page adjusts to it's new width. Some things move, some things get smaller etc. At a certain size, the top menu 'disappears' and changes into a pop up menu. This is for smaller screens. In short, it's made like this on purpose, to adjust for "many items vs. small screens" How would you want it to work? You could try to 'zoom' the menu to a to smaller size for different screen widths or so in css. maybe add to themes/<your theme folder>/css/global.css: All the way at the end: @media (min-width: 768px) and (max-width: 991px) { #block_top_menu { zoom:0.8; // adjust to make it fit for your menu as appropriate } } @media (min-width: 992px) and (max-width: 1199px) { #block_top_menu { zoom:0.9; // adjust to make it fit for your menu as appropriate } } N.B. The min-width and max-width values are the default values where prestashop normally changes to other layouts, better fitting for that size, so don't change these values. Hope this helps, pascal. Link to comment Share on other sites More sharing options...
JRFerreira Posted October 21, 2014 Author Share Posted October 21, 2014 (edited) Hi pascal, Thanks for your suggestion. I've tried to put the code on the end of global.css (as i shown), but it seams that it doesn't do nothing. .btn-pinterest i { color: #ce1f21; } .btn-pinterest:hover { color: white; background-color: #ce1f21; } .btn-pinterest:hover i { color: white; } @media (min-width: 768px) and (max-width: 991px) { #block_top_menu { zoom:0.8; // adjust to make it fit for your menu as appropriate } } @media (min-width: 992px) and (max-width: 1199px) { #block_top_menu { zoom:0.9; // adjust to make it fit for your menu as appropriate } } Is this correct? Best regards global.cssFetching info... Edited October 21, 2014 by JRFerreira (see edit history) Link to comment Share on other sites More sharing options...
PascalVG Posted October 22, 2014 Share Posted October 22, 2014 Do you have a link to your site?? Did you clear your cache? (BTW, at the moment on holiday to Singapore, without computer. , back on Sat. Can do some basic checks, but not more than that now) Pascal. Link to comment Share on other sites More sharing options...
JRFerreira Posted October 22, 2014 Author Share Posted October 22, 2014 Hi Pascal, First i must give you a giant thanks for responding me in vacations! The site is www.mycatfishstore.com This is not urgent, so have a good vacations e have fun! Best regards Link to comment Share on other sites More sharing options...
PascalVG Posted October 31, 2014 Share Posted October 31, 2014 Hi JR, sorry for late response. I think the code is working, only the values we need to adjust a little, as you have quite some menu items, giving a wide topmenu: Try this: change the red code in the global.css file @media (max-width: 1199px) and (min-width: 992px) { #block_top_menu{ zoom: 0.79; } } and @media (max-width: 991px) and (min-width: 768px) { #block_top_menu{ zoom: 0.63; } } Which will result in: (screen width between 992-1199 pixels wide:) (screen width between 768-991 pixels wide:) Hope this does the trick, pascal Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now