New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Hide Icon Column in RadMenu

Problem

RadMenu allows you to put an icon in each menu item. The space for this icon remains there even if an icon is not set for a specific item, because another item may have an icon and thus break the alignment.

Solution

If you do not want to use icons and you want to remove the icon column, you can override the built-in CSS of the control. The rules will differ for the Classic and Lightweight render modes.

  • Lightweight RenderMode

    <style>
      div.RadMenu .rmGroup:before
      {
          width: 0px; /*remove the colored stripe from the left side*/
      }
    
      div.RadMenu .rmGroup .rmLink
      {
          padding-left: 0px; /*remove the text padding from the left side*/
      }
    
      div.RadMenu .rmGroup .rmSeparator
      {
          margin-left: 0px;/*stretch the separator*/
      }
    </style>
    <telerik:RadMenu runat="server" ID="RadMenu1" RenderMode="Lightweight" Skin="Bootstrap">
    <Items>
        <telerik:RadMenuItem Text="first">
            <Items>
                <telerik:RadMenuItem Text="one"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="two" IsSeparator="true"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="three"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="second"></telerik:RadMenuItem>
    </Items>
    </telerik:RadMenu>
    
  • ClassicRenderMode

    <style>
      .rmGroup .rmLink .rmText {
      margin: 0 0 0 -24px !important;
      }
      .RadMenu .rmGroup .rmImage,
      .RadMenu .rmGroup .rmLeftImage {
      display: none;
      }
    </style>
    <telerik:RadMenu runat="server" ID="RadMenu1" RenderMode="Classic" Skin="Bootstrap">
    <Items>
        <telerik:RadMenuItem Text="first">
            <Items>
                <telerik:RadMenuItem Text="one"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="two"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="three"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="second"></telerik:RadMenuItem>
    </Items>
    </telerik:RadMenu>
    
In this article