1.6 Top Menu Sub-Menu spacing issues...

[SWcoins.com]

Version 1.6.0.5

1 click upgrade from 1.5.x

 

Live site to see what I am talking about: https://www.swcoins.com

 

I am a coin selling site. I have a top menu that lists the types of US coins. When you hover over the parent element the child element on some of the sub categories are not spaced correctly. Specifically look at the US Dimes tab compared to the US Cent tab...

 

Any thoughts on how to fix this?

[clever corporation]

You tried the settings in the block top module?

[SmartDataSoft]

If you send a screen shot i can suggestion you what to do.

[SWcoins.com]

@clever corporation In the "Top horizontal menu" module config window there is nothing about spacing or settings, just a combo box of what categories you wish to include.

@smartdatasof: You can view directly what I am talking about by going to swcoins.com  hover over US Cents then hover over US Dimes. The formatting is all jacked up.

[macswiney]

I have the same problem. How did you placed the menu on the left side?

 

Thankyou

[SmartDataSoft]

@swcoins

 

I just saw that you menu element add a class first-in-line-lg which have a property to clear the left which down you menu element

[SWcoins.com]

@smartdatasoft Ok so how do I fix it so all the sub categories are evenly spaced?

 

@macswiney I have no idea... I just did that when I populated the fields from the admin control BO

[SmartDataSoft]

Hello,@swcoins

 

I have made same menu like you and find that it is a bug. I will analysis the menu php or smarty code. 

 

I think there is some kind of divination of menu element which add the last class. 

[SWcoins.com]

@smartdatasoft, cool! Thank you! Also it would be great that when the sub categories do wrap around that there be more spacing between the top row and the lower rows. 

[SmartDataSoft]

@swcoin

 

This is a bug on menu js. They divided all menu child with 5 if there is not ration good it break 

	$('.sf-menu > li > ul > li:not(#category-thumbnail)').each(function(){  //add classes for clearing
		i++;
		if(i%2 == 1)
			$(this).addClass('first-in-line-xs');
		else if (i%5 == 1)
			$(this).addClass('first-in-line-lg');
			
			console.log(i + "  .." + $(this).text());
	});

[SWcoins.com]

So how do you fix it?

[SmartDataSoft]

I have open a bug report on prestashop bug tracker. 

 

If i found any solution or vikea find somethings for us it will help all

[SWcoins.com]

Excellent. Thank you! Can you post a link to the bug report?

[SmartDataSoft]

Excellent. Thank you! Can you post a link to the bug report?

here is the url

 

http://forge.prestashop.com/browse/PSCSX-1202

[prestamax]

I think there is something wrong with the count in the Dimes submenu.

 

In the dimes submenu the first sub menu link starts with class="first-in-line-xs" (this class should be added to every second menu item acc. to the script smartdatasoft mentioned)
 

 

 

 

If you compare it with the submenu of Nickels where the alignment is correct you see that only the second menu item gets the "first-in-line-xs" class not the first

 

 

So for some reason the dimes submenu considers the first submenu item being the second.

[SmartDataSoft]

Yes this is what i mention that supper fish menu js have a little bug.

[ps3z]

Yes this is what i mention that supper fish menu js have a little bug.

 

 

hi i did upgrade my presta from 1.5.6.2 to 1.6 without any error

 

 

but drop down menu isnt opening.could please check it

 

 

www.shop4play.com

 

 

Regards

Ps3z

[prestamax]

Did you add the submenus in the module settings? They won't appear if you don't place them in the horizontal topmenu module settings.

[ps3z]

Did you add the submenus in the module settings? They won't appear if you don't place them in the horizontal topmenu module settings.

 

 

yes i added if you click that you will see its have already

[Greenpilgrim]

Still no fix?

[prestamax]

In default-bootstrap/css/modules/topmenu/superfish-modified.css
delete ~line 158
 

 @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }

 

[Greenpilgrim]

Excellent

 

Thank You

[razorloves]

 

In default-bootstrap/css/modules/topmenu/superfish-modified.css

delete ~line 158

 

 @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }

awesome. thanks prestamax. that bug was drivin me nuts.

[peterept]

Hi,

 

I had the same issue.

 

I've updated the bug with the correct fix:

 

http://forge.prestashop.com/browse/PSCSX-1202

 

Hope that helps you too,

 

Peter

 

Update: To make it easier, I've attached the complete file. For default theme, replace this one:

themes/default-bootstrap/js/modules/blocktopmenu/js/blocktopmenu.js

blocktopmenu.js.zip

Edited April 3, 2014 by peterept (see edit history)

[prestamax]

Cool, thank you.

[peterept]

FYI: The fix has now been accepted into the 1.6 branch.

https://github.com/PrestaShop/PrestaShop/pull/1628

 

Rgds,

 

Peter

[thadunno]

Still having the same problem here, even when using the above .zip. Strange.

[peterept]

Can you post an image?

[prestamax]

Still having the same problem here, even when using the above .zip. Strange.

 

Did you clear the cache?

Edited April 8, 2014 by prestamax (see edit history)

[box1111]

Posted file not working. For fixing this problem I change

 

    i = 0;
    $('.sf-menu > li > ul > li:not(#category-thumbnail)').each(function(){  //add classes for clearing
        i++;
        if(i%2 == 1)
            $(this).addClass('first-in-line-xs');
        else if (i%5 == 1)
            $(this).addClass('first-in-line-lg');
    });

 

to

 

  $('.sf-menu > li > ul').each(function() {
  i = 0;
  $(this).children('li').each(function() { //add classes for clearing
  if ($(this).attr('id') != "category-thumbnail")
  { i++;
     if(i%2 == 1) $(this).addClass('first-in-line-xs');
    else if (i%5 == 1) $(this).addClass('first-in-line-lg'); }
   });
  });

 

in file  themes/default-bootstrap/js/modules/blocktopmenu/js/blocktopmenu.js

[FurkyStyle]

 

In default-bootstrap/css/modules/topmenu/superfish-modified.css

delete ~line 158

 

 @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }

 

Just wanted to say it worked for me! Thx

[drolex]

I'm not sure what your exact spacing issue was since there is no screenshot. I also had a spacing issue that the suggested code delete did not fix. The problem was that 2 links in the menu would appear as one link because there is no vertical spacing. Here is my solution.

 

PrestaShop 1.6.0.8

Open file themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

Find this code starting at line 148:

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px;

Change to:

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px;
  min-height:50px;
  margin-bottom:20px; }

Clear cache.