[Resolved] Secondary Navigation Sub Sub-Menu Width

[Mary Pearson]

Is it possible to have the main navigation one width but the sub-menu and sub sub-menu widths different?

Website in question is http://plantbest.info/

Under Horticultural Products I have a sub-menu with COIR, BAMBOO and APPENDIX which doesn’t require very much width. I would like to make it narrow so that I can make the sub sub menus wider.

Is this possible?

Thanks!

[Tom]

You’ll have to use CSS to target each level of sub-menu.

First level:

.secondary-menu > li > ul

Second level:

.secondary-menu > li > ul > li > ul

And so on..

That should do the trick.

[Mary Pearson]

As usual this is the perfect answer. Thank you so much Tom.

Now just to make it a little more difficult, is it possible to have different widths for each of the sub-menus in the secondary navigation – i.e. Under Horticultural Products

.secondary-menu > li > ul {
width:120px !important;
}

.secondary-menu > li > ul > li > ul {
width:320px !important;
}

.secondary-menu > li > ul > li > ul > li > ul {
width:330px !important;
}

but Under Retail Products

.secondary-menu > li > ul {
width:320px !important;
}

.secondary-menu > li > ul > li > ul {
width:500px !important;
}

I thought I would be able to put the .menu-item- number in front but that just negates the good changes that are working with your code.

Thanks again!

[Tom]

You’ll have to inspect the elements and find the specific menu item IDs for each item to specifically target them. The classes should be in the <li> elements and look something like: menu-item-123

[Mary Pearson]

Thanks Tom. I had the right idea but needed to correct a few things. Your input helped greatly. Much appreciated!

[Author]

Posts