RadMenu Item Heading Font Size

5 posts, 1 answers
  1. Effat
    Effat avatar
    16 posts
    Member since:
    Apr 2011

    Posted 21 Nov 2011 Link to this post

    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;

    }
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Nov 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Effat
    Effat avatar
    16 posts
    Member since:
    Apr 2011

    Posted 21 Nov 2011 Link to this post

    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??
  5. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Effat
    Effat avatar
    16 posts
    Member since:
    Apr 2011

    Posted 24 Nov 2011 Link to this post

    Thank you Kate, it works just as I wanted :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017