Kendo Menu CSS

10 posts, 0 answers
  1. Jillian
    Jillian avatar
    16 posts
    Member since:
    Aug 2011

    Posted 03 Jan 2013 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 03 Jan 2013 Link to this post

    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!
  3. Jillian
    Jillian avatar
    16 posts
    Member since:
    Aug 2011

    Posted 03 Jan 2013 Link to this post

    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;
    }
  4. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 04 Jan 2013 Link to this post

    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!
  5. Jillian
    Jillian avatar
    16 posts
    Member since:
    Aug 2011

    Posted 04 Jan 2013 Link to this post

    Is there any documentation on how to manually set the .Selected(true), and to set the .selected(true) dynamically based on the current page?
  6. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 07 Jan 2013 Link to this post

    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!
  7. Kevin
    Kevin avatar
    6 posts
    Member since:
    Jun 2012

    Posted 05 Dec 2015 in reply to Dimo Link to this post

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

  8. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 08 Dec 2015 Link to this post

    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
  9. Matthew
    Matthew avatar
    13 posts
    Member since:
    Oct 2018

    Posted 11 Oct 2018 Link to this post

    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.

  10. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 12 Oct 2018 Link to this post

    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.
Back to Top