Styling the Menu

[john]

I have been trying for several days to bend the menu to my will, and nothing has worked.

I'm using MVC5, Bootstrap 3, and Telerik UI for MVC (2019.1).

I have a div that is 28px tall, and I'm trying to get the menu to be constrained within that div's height. The problem is that the menu appears to be padded/margined and is 50px tall, regardless of the class styles I've tried to set. There doesn't appear to be any documentation (that I've found) that describes how to re-style the components.

For instance, it would be real nice if I could find a description regarding what to do to change the colors, the sizes, and the positioning. What css classes affect each widget?

 

[Dimitar]

Hello John,

In general, modifying the Menu height could be achieved through the following selector:

<style>
  .k-menu .k-item>.k-link {
    /* set padding */
    /* set line-height  */
  }
</style>

For customizing the themes you can check out the following resources based on the type of theme that you are using (Less-based or Sass-based):

• Less-Based Themes Documentation.
• Less-Based Themes Section on Customization.
• Less ThemeBuilder - enables you to modify Kendo UI Less themes to match the look and feel of your website or application.
  
  
• Sass-Based Themes Documentation.
• Sass-Based Themes Section on Customization.
• Sass ThemeBuilder - enables you to modify Kendo UI Sass themes to match the look and feel of your website or application.

Regards,
Dimitar
Progress Telerik