Menu - Styling, how to reduce padding?

[AP]

I have a menu, using v2022.2.802 and I need to reduce the padding on the top level of the menu.  The documentation does not include any examples on how to do this.

What styles need to be changed to reduce the padding on the menu?  I have reduced the font-size by using:-

.k-menu-link-text {
        font-size: smaller !important;
   }

But this still leaves a larger amount of padding on the top level menu.

Thanks

[AP]

I've now added :-

   span.k-menu-link {
        padding:8px !important;
    }

Which seems to work? Is this the best way. Some documentation on these styles would be extremely useful!

[Anton Mironov]

Hi Andrew,

Yes, you are totally correct - this is the recommended approach.

The styling options are per the client's preference and could be set to parts of the component. The following article represents the rendering of the Telerik UI Menu component:

• https://docs.telerik.com/kendo-ui/controls/navigation/menu/appearance#rendering

I hope this is giving some extra information on which classes could be used for further styling if needed.

Kind Regards,
Anton Mironov