Menu - Styling, how to reduce padding?

0 Answers 122 Views
Menu
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 16 Jan 2023, 03:24 PM

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
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 17 Jan 2023, 11:36 AM

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
Telerik team
commented on 19 Jan 2023, 09:28 AM

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:

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


Kind Regards,
Anton Mironov

No answers yet. Maybe you can help?

Tags
Menu
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or