RadMenu Item Heading Font Size

[Effat]

Hello,

I have a radmenu with 3 main items:

1- Home
2- Manufacturing
3- Production

Each these item has sub-items except for "Home". Now I want these items to have font-size = 14 and sub-menus to have font-size= 12.

When I apply the following class, the font size of Manufacturing and Production increasing due to ExpandDown. What can I do to increase the font of Home item as well..?

DIV.RadMenu_ctSkin .rmItem .rmLink .rmExpandDown{

FONT-SIZE: 14px;

}

[Princy]

Hello,

Try the following CSS.

CSS:

<style type="text/css">
  .font1
  {
     font-size:14px !important;
  }
 .font2
  {
     font-size:12px !important;
  }
</style>

ASPX:

<telerik:RadMenu ID="menu1" runat="server">
 <Items>
  <telerik:RadMenuItem Text="Home" runat="server" CssClass="font1">
  </telerik:RadMenuItem>
  <telerik:RadMenuItem Text="Manufacturing" runat="server" CssClass="font1">
   <Items>
     <telerik:RadMenuItem Text="M1" runat="server" CssClass="font2">
     </telerik:RadMenuItem>
     <telerik:RadMenuItem Text="M2" runat="server" CssClass="font2">
     </telerik:RadMenuItem>
   </Items>
  </telerik:RadMenuItem>
  <telerik:RadMenuItem Text="Production" runat="server" CssClass="font1">
   <Items>
    <telerik:RadMenuItem Text="P1" runat="server" CssClass="font2">
    </telerik:RadMenuItem>
    <telerik:RadMenuItem Text="P2" runat="server" CssClass="font2">
    </telerik:RadMenuItem>
   </Items>
  </telerik:RadMenuItem>
 </Items>
</telerik:RadMenu>

Thanks,
Princy.

[Effat]

Thank you Princy for your prompt reply.

Actually I am using a custom telerik skin on RadMenu so I cannot apply individual classes to it and if I do apply individual classes to it, the font size will be over-rided. But in HTML "every rad menu item" whether it is a sub-menu item or the main menu item, they break into .rmlink and .rmtext and the font size will be applied to .rmlink and not to the Text of the menu (Home is .rmtext)

Can you please suggest something along the lines of custom telerik skin??

[Kate]

Hello Effat,

You can apply the following css class selector:

div.RadMenu_ctSkin .rmHorizontal .rmRootLink span.rmText { font-size: 14px; }

Greetings,
Kate
the Telerik team

[Effat]

Thank you Kate, it works just as I wanted :)