• Can’t figure out how to reduce with of menu/sub-menus using CSS. Assistance will be most appreciated!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hey there cjyvr,

    How are you doing today?

    Would you mind posting link to your site and adding more details on what exactly are you trying to do so I can take a look?

    Cheers,
    Bojan

    @cjyvr, go into the menus.css virtual CSS file and look for these two rules:

    .menu a,
    #menu1-smooth a,
    #menu2-smooth a  {
       display:   block;
       padding:   0 8px;
       text-decoration:  none;
       white-space: nowrap;
       width: auto; /* <-- change this to a px width for fixed width on first level items */
    }
    
    .menu ul a,
    #menu1-smooth a,
    #menu2-smooth a {
       width:  150px;
       white-space: normal; /* 2nd level items we DO want to wrap */
    }

    For the first rule, which controls the width of the top level menu items, the width is set to auto, meaning the width of the menu item will shrink/grow to fit the contents of the menu item. The second rule sets the sub-menu items to 150px wide. Experiment with changing the width values to something that fits your needs.

    Thread Starter cjyvr

    (@cjyvr)

    Thanks so much!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reducing width of menu’ is closed to new replies.