Top Menu Submenu Spacing issue

[renren0213]

Hi all,

 

I have been facing submenu spacing issue on my store where the 6th submenu item doesn't seems to be shown correctly. It just went under the last submenu item and looks weird. (see attached screenshot)

 

I'm aware of the previous discussion on changing blocktopmenu.js but it seems the version I got have already fixed that.

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

 

I'm kinda lost, anyone has any idea where to fix this?

 

I'm using Prestashop version 1.6.0.11 and my website domain is http://www.amorebabies.com (is in chinese though)

 

Thanks guys.

[renren0213]

anyone please?

[Paulito]

Hello

 

I think the default action of PS 1.6 is to space only five (5 x 20% width) categories in the Horizontal menu

 

http://screencast.com/t/rxwgQOe68m

 

Try changing this code around line 148 of superfish-modified.css

 

.sf-menu > li > ul > li {

  float: left;

  width: 20%;                   (change this to 16.66%)

  padding-right: 15px; }

 

 

Or you could add this to anywhere in global.css

 

.sf-menu > li > ul > li {width:16.66%!important}

 

Result

http://screencast.com/t/1MP6QHfilLUv

 

Paul

[finlanderid]

@renren0213

 

I think this javascript did not ever get fixed correctly. The first-in-line classes (for different screen sizes) need to be injected on the LI list items, not on the UL unordered list tag. See attached screen shot. Injecting on the UL does no good. If there were 6 or more Dresses sub-categories, then the 6th one should get the first-in-line-lg class, but it won't get it, because the javascript function is wrong (blocktopmenu.js in /themes/default-bootstrap/js/modules/).

 

Screenshot:

Edited March 30, 2015 by finlanderid (see edit history)

[finlanderid]

Here is what I came up with. That function was really messed up. The github commit from Spring of 2014 must not have been examined very closely.

 

// init Super Fish Menu for 767px+ resolution
function desktopInit()
{
    mCategoryGrover.off();
    mCategoryGrover.removeClass('active');
    $('.sf-menu > li > ul').removeClass('menu-mobile').parent().find('.menu-mobile-grover').remove();
    $('.sf-menu').removeAttr('style');
    categoryMenu.superfish('init');
    //add class for width define
    $('.sf-menu > li > ul').addClass('submenu-container clearfix');

    // loop through each sublist under each top list item --
    // this is the part that was fixed wrong in 2014 -- didn't they test?
    $('.sf-menu > li').each(function(){
        i = 0;
        $('ul > li', this).each(function(){
            //add classes for clearing
            if ($(this).attr('class') != "category-thumbnail")
            {
                i++;
                if (i % 2 == 1)
                    $(this).addClass('first-in-line-xs');
                if (i % 5 == 1)
                    $(this).addClass('first-in-line-lg');
            }
        });
    });
}

 

 

This puts the xs class on items 1, 3, 5, 7, 9, 11, etc. The lg class is put on items 1, 6, 11, 16, 21, etc. It is not really necessary to put both of those classes on item 1, but it does not hurt to do so.

 

Summary:

 

Problem 1 -- Solved: avoids including ALL li > ul > li in the same loop. Only the li > ul > li items from its parent are included in the loop, so the loop itself is correct.

Problem 2 -- Solved: correctly applies the xs class and the lg class on all correct li children items within the parent, so first-in-line li items are styled correctly on mobile, tablet and pc.

Edited March 30, 2015 by finlanderid (see edit history)