Make horizontal menu wider

[Skippy]

While searching the forum for a way to do what I wanted I ran across a post from Scrambler that had this code:

@media screen and (min-width:768px) {
/* Set overall width */
ul.sm.wvrx-menu ul, ul.wvrx-menu ul {width:500px !important;}
/* Spread over two columns & top border */
ul.sm.wvrx-menu ul > li, ul.wvrx-menu ul > li {
float:left !important;width:33.3%;border-top:1px solid black;
}
/* First columns clear and right border */
ul.sm.wvrx-menu ul > li:nth-of-type(3n+1),
ul.wvrx-menu ul > li:nth-of-type(3n+1) {
clear:both;border-right:1px solid black;
}
ul.sm.wvrx-menu ul > li:nth-of-type(3n+2),
ul.wvrx-menu ul > li:nth-of-type(3n+2) {
border-right:1px solid black;
}
}

I dropped in into my site and this seems to be working like I want it to.

Only thing I need to modify is making the menu boxes (or tabs – not sure what to call it) wider.  You can see what I mean if you go to

Home

and hover over the menu item “my toons”.  You’ll see that one of the menu entries wraps to 2 lines.  I was guess the ‘width:500px’ was controlling this but I increased that number and nothing changed.  So either I’m wrong or I’m doing it wrong or I’m missing another step. Or could even be all three of those.  🙂

Thus the question – how do I control the width of each menu item?

Thanks!

Edit: I should probably add that if there is a better way to do this let me know how I should be doing it.

 

[scrambler]

You need to add the property below (in yellow) to remove the max-width in place, then changing the 500px will work

ul.sm.wvrx-menu ul, ul.wvrx-menu ul {width:600px !important;max-width:none !important;}

[Skippy]

That did it.

Thank you very much!

[Author]

Posts