Jump to content

PS 1.6 Default Theme:Top Menu Bar Slips


Recommended Posts

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

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 by JRFerreira (see edit history)
Link to comment
Share on other sites

  • 2 weeks later...

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:)
post-455771-0-69504700-1414723705_thumb.png
 
(screen width between 768-991 pixels wide:)
post-455771-0-27798200-1414723697_thumb.png
 
Hope this does the trick,
pascal

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...