This is a migrated thread and some comments may be shown as answers.

Radmenu item border color

1 Answer 226 Views
Menu
This is a migrated thread and some comments may be shown as answers.
james
Top achievements
Rank 1
james asked on 04 Feb 2021, 11:11 PM

I've added the following styling but it doesn't remove the white border or change the color as shown in the image. Also how can I remove the white vertical line on the end of the menu?

 

      .RadMenu_MetroTouch .rmRootGroup
       {          
            border-style: none  !important;
            border-color:gray  !important;

       }

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 09 Feb 2021, 11:48 AM

Hi james,

In order to remove the white borders between the menu items, you will need to apply the desired styles to the li elements. Also, please, note that when the border-style is set to none, the border-color will not be applied as well.

        <style>
            .RadMenu .rmRootGroup li {
                /*border-style: none !important;*/
                border-color: red !important;
            }
        </style>
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1"
            runat="server" ShowToggleHandle="true" Skin="MetroTouch">
            <Items>
                <telerik:RadMenuItem Text="Home" NavigateUrl="DefaultCS.aspx" />
                <telerik:RadMenuItem Text="Products">
                    <GroupSettings Width="200px" />
                    <Items>
                        <telerik:RadMenuItem Text="Chairs" NavigateUrl="DefaultCS.aspx?page=chairs" EnableImageSprite="true" CssClass="icon-chair"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sofas" NavigateUrl="DefaultCS.aspx?page=sofas" EnableImageSprite="true" CssClass="icon-sofa"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Tables" NavigateUrl="DefaultCS.aspx?page=tables" EnableImageSprite="true" CssClass="icon-table"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Stores" NavigateUrl="DefaultCS.aspx?page=strores" />
                <telerik:RadMenuItem Text="About" NavigateUrl="DefaultCS.aspx?page=aboutus" />
            </Items>
        </telerik:RadMenu>

As for the last vertical white line - it is not part of the default styling of the menu and I will advise that you follow the first two points in the following blog, inspecting where this style is coming from (it can be inherited by some global CSS style):

Improve Your Debugging Skills with Chrome DevTools

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Menu
Asked by
james
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or