This is a migrated thread and some comments may be shown as answers.
Kendo Menu CSS
9 Answers 449 Views
This is a migrated thread and some comments may be shown as answers.
Jillian
Top achievements
Rank 1
Jillian asked on 03 Jan 2013, 02:03 PM
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?

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 03 Jan 2013, 02:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jillian
Top achievements
Rank 1
answered on 03 Jan 2013, 04:04 PM
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;
}
0
Dimo
Telerik team
answered on 04 Jan 2013, 04:21 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jillian
Top achievements
Rank 1
answered on 04 Jan 2013, 04:30 PM
Is there any documentation on how to manually set the .Selected(true), and to set the .selected(true) dynamically based on the current page?
0
Dimo
Telerik team
answered on 07 Jan 2013, 08:27 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kevin
Top achievements
Rank 1
answered on 06 Dec 2015, 02:32 AM

.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.

0
Dimo
Telerik team
answered on 08 Dec 2015, 08:58 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Matthew
Top achievements
Rank 1
answered on 11 Oct 2018, 04:42 PM

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.

0
Dimo
Telerik team
answered on 12 Oct 2018, 02:32 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Jillian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jillian
Top achievements
Rank 1
Kevin
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Share this question
or