Hi,

How can I adjust the space between items on the rootmenu?

Also I have long submenu items like "Alarm, Control and Monitoring Systems" I tried to play on the submenu item width but when increasing the value, when my mouse is over the long item there's an overlap with the "on hover" effect. How can I solve that?

Regards!

Danyel

Perfect!

Thank you very much!

I too am having probmes with Root Menu Item spacing.  In your example above you say to find:

div#sample01 a.level1 span, div#sample01 span.level1 span {padding: 0px 20px 0px 20px;}

but is the style I'm working with (a copy of Style11) the only line I can find that looks close to this is:

#[XMENUID] a.level1 span, #[XMENUID] span.level1 span {padding: 6px 0 0 0;}

I can change the following line to get the menu items closer together by reducing the right padding from 20px to 10 px:

#[XMENUID] a.level1, #[XMENUID] span.level1 {padding: 0px 10px 0px 0px;font-size: 110%;line-height: 180%;}

But then the  "fancy" hover effect doesn't line up over the menu items.

Please help.

Bump, please!

I need to see you custom menu to find the exact part how ever there are a few class you need to modify to reduce item spacing:

Items left padding (20px):
#[XMENUID] li.level1 {padding: 0px 0px 0px 20px; margin-right:2px;background: url([PATH]/menu_level1_item.png) 0 0 no-repeat;}

Items right padding (20px):
#[XMENUID] a.level1, #[XMENUID] span.level1 {padding: 0px 20px 0px 0px;font-size: 110%;line-height: 180%;}

Fancy items padding(35px):
#[XMENUID] li.fancy div.fancy-container {padding: 0px 35px 0px 35px;}
#[XMENUID] li.fancy div.fancy-container div.fancy-l {position: absolute;top: 0px;left: 5px;width: 35px;height: 37px;background: url([PATH]/menu_fancy_l.png) 0 0 no-repeat;}
#[XMENUID] li.fancy div.fancy-container div.fancy-r {position: absolute;top: 0px;right: 5px;width: 35px;height: 37px;background: url([PATH]/menu_fancy_r.png) 0 0 no-repeat;}

 

That helped and I'm almost finished.

The only thing I need now is to know how to change the verticel positioning of the Root Menu Text.

I changed the Font Size and the Menu Height and the text is too low in the menu bar.

Try to change values of following items:

#[XMENUID] a.level1, #[XMENUID] span.level1 {padding: 0px 20px 0px 0px;font-size: 110%;line-height: 180%;}

#[XMENUID] a.level1 span, #[XMENUID] span.level1 span {padding: 6px 0 0 0;}

Perfect!  I'm going to purchase the module right away.  Thanks for your help.

BTW - You should think about adding a section to your Documentation outlining these Horizontal and Vertical Styling Tips.

Thanks again.