Kendo Menu CSS

8 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
    8333 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. UI for ASP.NET MVC is VS 2017 Ready
  4. 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;
    }
  5. Dimo
    Admin
    Dimo avatar
    8333 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!
  6. 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?
  7. Dimo
    Admin
    Dimo avatar
    8333 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!
  8. Kevin Scheidt
    Kevin Scheidt 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.

  9. Dimo
    Admin
    Dimo avatar
    8333 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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready