Mega Menu Word Wrapping

[MooreSpeed]

Hello and good morning!

We are in the process of updating our categories and navigational structure on our website and have decided to start using a mega menu for ease of use. We have got to the stage where it is pretty much completely styled and worked out, just having to create the category structure which is the lengthy part!

I have one problem however, if i create a heading which is a sub-heading+ (list sub-categories below automatically) and one of the categories have a long title, the text will overlay the next column like in the image attached. Now i don't want to have to change the category title, as it needs to be that long.

So my question is, does anyone know how i can get the text to wrap to the next line if it is larger than the child column div?

If it helps, i can enable the nav link (motorcycle parts) so you are able to see the issue for yourself?

Regards

James

msr.jpg

[Mikey]

Hi,

To free-up width space you could go with 4 columns instead of 5 by removing the column divider (within 'Navigation Manager') between 'Cooling' and 'Electrics' for example so they stack on top of each other.

Alternatively, within the 'Additional CSS' field find the class '.childcolumn' and try adding the line 'white-space: pre-wrap;' and see how that works - example:

.childcolumn {
white-space: pre-wrap;
}

There is one more way I can think of that involves giving the column in question a wider width (reducing the width of the others in the process of course), but this might require some rejigging when adding/changing things in the future, so see how you get on with the above first.


Hope this helps?

Mike