Menu remove arrow sprite

[Matt]

I am hoping this is a simple question

I have a Menu using the Bootstrap theme, and am wanting to remove the rmRightArrow sprite from showing.

The arrow that comes standard in it is too small for us, and are wanting to use the bigger arrow seen in the image.

I have inspected and found the following to be where the arrow is, but cannot remove it as a default.

 

.RadMenu_Bootstrap .rmHorizontal>.rmItem .rmExpandDown:after, .RadMenu_Bootstrap .rmHorizontal>.rmItem .rmExpandTop:after, .RadMenu_Bootstrap .rmHorizontal>.rmItem .rmExpandLeft:after, .RadMenu_Bootstrap .rmHorizontal>.rmItem .rmExpandRight:after {
content: "";
margin: 0 -4px 0 4px;
border: 4px solid transparent;
border-top-color: inherit;
display: inline-block;

If I untick the 'content' item, the little arrow disappears.

How do I remove it as I don't want to have two arrows displayed.

Thank you in advance.

[Vessy]

Hello Matt,

You can manage the visibility of the arrow handle through the ShowToggleHandle property of the menu:

<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" ShowToggleHandle="false" Skin="Bootstrap">
    ...
</telerik:RadMenu>

You can find more details on the matter in the following help article:
https://docs.telerik.com/devtools/aspnet-ajax/controls/menu/functionality/toggle-handle

Regards,
Vessy
Progress Telerik

[Matt]

Thanks Vessy,

It was as simple as that. I set the ShowToggleHandle to False, but I had the RenderMode in Classic and it wasn't removing it.

Changed the RenderMode to Lightweight, and now it has disappeared and given me what I was after.

Regards,

Matt