[SOLVED] how to modify Top horiontal menu subcategories

[xkilo]

Hello all,

I want to change top horizonal menu. Now it displays sub-categories in one column. And I want it to display sub-categories in two or more columns, like this:

Category 1:
Sub-cat 1 | Sub-cat 3
Sub-cat 2 | Sub-cat 4

 

Regards.

[NemoPS]

Hi there!

It is, unfortunately, harder than it seems!

Usually, you can achieve the multi-column result by adding several left-floated UL tags. The problem is, all the code for the module is generated in blocktopmenu.php!

 

You have to modify its getCategory method to do it, but it's really hard to be able to guide you from a simple forum post

[vekia]

hmm and what with css styles? i think that it is able to do it with css only

 

example:

 

 

i just changed width from auto to 403px in:

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 34px;
z-index: 99;
width: 403px;
}

[NemoPS]

Yes, but this way they are not exactly columns as elements are placed like:

 

item 1 - item 2

item 3 - item 4 

 

Rather than

 

item 1 - item 3

item 2 - item 4

 

But if he's okay with it, why not!

 

In addition, he will have to add a solid background to the ul element, to prevent weird shadows and li floating unequally

[xkilo]

 

hmm and what with css styles? i think that it is able to do it with css only

 

example:

 

 

i just changed width from auto to 403px in:

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 34px;
z-index: 99;
width: 403px;
}

 

Thank you, I think that's what I want

 

I'll try it and then tell you it was well.

[xkilo]

Hi there!

It is, unfortunately, harder than it seems!

Usually, you can achieve the multi-column result by adding several left-floated UL tags. The problem is, all the code for the module is generated in blocktopmenu.php!

 

You have to modify its getCategory method to do it, but it's really hard to be able to guide you from a simple forum post

 

Hi I just want a simple function to divide the columns.

 

Something more complicated is better and easier to buy a ready-made module.

 

 

Edited: website image removed

Edited September 27, 2013 by xkilo (see edit history)

[xkilo]

 

hmm and what with css styles? i think that it is able to do it with css only

 

example:

 

 

i just changed width from auto to 403px in:

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 34px;
z-index: 99;
width: 403px;
}

 

 

Thank you worked fine

[vekia]

this is what you expected?

it's only example, you will have to change several things mentioned by Nemo1 above

[xkilo]

Yes works fine.

 

It was look very good. I just wanted to split the long column in three small columns.  I Just changed the CSS code as you said with my dimensions.

 

Thanks again.

[vekia]

okay, thank you for confirmation that it works as you expected

im going to mark this thread as [solved]

if you will have any additional questions - feel free to continue discussion 

 

with regards,

Milos

[tbamy]

Hi, I know this is an old post but it describes exactly what I want to do. I have some subcategories with many sub-sub-categories and I want to split a column into 2-3 columns. I tried to modify the css as you said but I can't find this code line, maybe because I use prestashop 1.6 and it's different. Any suggestions on how to do it? If it's possible with just some css modifications I would prefer that than changing the module code.

[NemoPS]

Try with 

 

.sf-menu ul li {

1. width: 50%;
2. float: left;

}

 

And adjust as per your needs

[tbamy]

I think it's not the width I have to change. I just want to split some columns because they are too long, so maybe it has to do with the height? I tried, but nothing changed.