Home Forums Weaver Xtreme Theme Make horizontal menu wider

Topic Resolution: Resolved
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #67560

    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


    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?


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



    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;}

    That did it.

    Thank you very much!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.