Mega Menu 1st level width

[maroni35]

Hi,

I am looking to use a Mega Menu layout, (ver 12.04) but am struggling to fit in all our categories. I can't break some of them down into short enough phrases to be meaningful but there does not seem to be a text wrap for the 1st level categories. The 2nd level categories do wrap.

You can set the column width in the Mega Menu part of site options but this does not seem to impact it. Anyone had to do this?

So rather than

Mats, Cutters & Rulers

I would prefer

Mats, Cutters
& Rulers

Cheers
David

[malbro]

You can set the column width in the Mega Menu part of site options but this does not seem to impact it. Anyone had to do this?

So rather than

Mats, Cutters & Rulers

I would prefer

Mats, Cutters
& Rulers

Cheers
David

Yes you can do this through the css settings, I am working on a site for a client where we now have 10 items in the top bar one of which takes 3 lines and several use two.
You need to work in the 'Current Stylesheet', look for '.navigation-bar ul li a', the settings I am using are

.navigation-bar ul li a {
    float: left;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
    max-width: 89px;
    min-width: 88px;
    text-align: center;
    text-decoration: none;
}

[maroni35]

Dear Malcolm,

Thanks for that, seems to be largely working on a test site, the main issues appear to be background of the header bar is now not thick enough for the double or triple line wraps and the border right style is not consistent. So when it is a single normal line for a category the border goes down one line, with a double line category it goes down two. Would be nice to be consistent on two but does not seem possible.

But great to know it can be done, time for more experimenting.

[malbro]

Dear Malcolm,

Thanks for that, seems to be largely working on a test site, the main issues appear to be background of the header bar is now not thick enough for the double or triple line wraps and the border right style is not consistent. So when it is a single normal line for a category the border goes down one line, with a double line category it goes down two. Would be nice to be consistent on two but does not seem possible.

But great to know it can be done, time for more experimenting.

Set the background colour for the <ul> tag

.navigation-bar ul {
background: none repeat scroll 0 0 #585E42;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}

The <li> tag relates to each item in the list, the <ul> tag relates to the complete list there are also settings in the .navigation-bar { which relate to the complete class.