Kendo Menu CSS

[Jillian]

Is it possible to change the CSS for the Kendo menu only? Looking at this doco: http://docs.kendoui.com/getting-started/web/appearance-styling, I see that the k-header class will change the top level menu - but it also affects other controls.  I also see the k-state- classes.  I only want to change the menu, and its hover and selected states. Is this possible?

[Dimo]

Hi Jillian,

Yes, it is possible to customize the appearance of the Menu only. Please refer to the Customizing Appearance section of the help article, which includes some examples:

http://docs.kendoui.com/getting-started/web/appearance-styling#customizing-appearance

Generally, you have two options - customize all Menus with the k-menu CSS class, or customize a particular Menu instance with its ID or a custom class.

Let me know if there is anyhing unclear.

Greetings,
Dimo
the Telerik team

[Jillian]

How can I get the current page to be highlighted in the menu? I am using this menu on a master page. And how do I get rid of the border on the side of each element?

I have the following css:

.k-menu
{
    border:0px;
}
 
.k-menu .k-link 
{
    font-size:16px;
    text-decoration:none;
    border:0px;
}

[Dimo]

Hello Jillian,

The item border is normally applied by the li.k-item element. If you have not customized the Menu styling with this regard, you can easily remove the border by overriding the default Kendo style with the following rule:

.k-menu li.k-item,
.k-widget.k-menu-horizontal > li.k-item
{
    border-right-width: 0;
}

The Menu will automatically highlight the item, which corresponds to the current page if you use SiteMap databinding:

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/menu/overview#bind-kendo-menu-to-a-sitemap

Otherwise you will have to do it manually by setting .Selected(true) for the given item.

Regards,
Dimo
the Telerik team

[Jillian]

Is there any documentation on how to manually set the .Selected(true), and to set the .selected(true) dynamically based on the current page?

[Dimo]

Hello Jillian,

I am afraid there is no documentation with regard to setting .Selected(true) on the fly, because this depends on your custom implementation. For example, you can set .Selected(condiition) to all items and implement the condition in such a way (using the controller and action names), that it will be true only for one item.

Regards,
Dimo
the Telerik team

[Kevin]

.k-menu li.k-item,
.k-widget.k-menu-horizontal > li.k-item
{
    border-right-width: 0;
}

 

works...how about getting rid of the rounding of edges?

 

my entire menu has round corners.

[Dimo]

Hello Kevin,

Rounded corners depend on the Kendo UI theme that you are using, and actually, most themes do not define rounded corners for the Menu.

http://docs.telerik.com/kendo-ui/web/appearance-styling

However, you can disable rounded corners with

.k-menu,
.k-menu .k-item {
  border-radius: 0;
}

Regards,
Dimo
Telerik

[Matthew]

Is there any documentation that specifically which css affects which particular element when styling the menu?

I have overridden the background color for the li and the a elements in a link, but none of my applications apply.

[Dimo]

Hello Matthew,

I admit that we do not have such documentation. While expecting or creating such a document can seem tempting at first glance, I believe that creating and maintaining such a large information array will be too big effort to be justified. Moreover, there are infinite number of CSS override scenarios that may require specific development techniques (selectors) that cannot be foreseen to be properly documented. I say this as a former front-end developer.

That is why, we recommend every UI developer to be aware of the general principles of CSS specificity. We also provide basic tips for overriding Kendo UI styles at:

https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#customization-of-appearance

On the other hand, there is a straightforward way to check what styles are applied to a given element and which one takes precedence. Please refer to the following blog post:

https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools

The sections of interest are "Inspect the Generated HTML of a Control" and "See the Applied Styles".

I can suggest a quick way to check if your selectors are correct and whether you are targeting the correct HTML elements - add an !important clause to your custom CSS rules. If the desired styles appear, then the issue is a matter of CSS specificity and selector precedence. Otherwise, you may need to target different elements or make sure the CSS rules are actually loaded and applied on the page.

If you need further assistance afterwards, please send us a live URL or an isolated example for us to check locally.

Regards,
Dimo
Progress Telerik