RadMenu Styling and Levels

4 posts, 0 answers
  1. Steve
    Steve avatar
    2 posts
    Member since:
    Oct 2013

    Posted 17 Dec 2013 Link to this post

    I am struggling with styling menus in my web application.  I have a vertical menu on the left side of the screen that is the main navigation menu for the site.  Within modules of the web app, I repeat some of the submenus as a horizontal tab strip across the top of the page.  (But still using the RadMenu control here.)  

    See file attachment.

    I would like to force the styles of the top horizontal menu to match the styles of the corresponding flyout menus on the vertical menu.  But they do not seem to want to do this since they are at different levels.  Is this possible?

    Thanks in advance for any help.
    Steve
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 17 Dec 2013 Link to this post

    Hi Steve,

    To do so you can use the following css class selector:
    div.RadMenu_Web20 a.rmLink {
        color: #000000;
    }
     
    div.RadMenu_Web20 .rmRootGroup {
        background-color: #FFFFFF;
        border: 1px solid #6788BE;
    }
     
    div.RadMenu_Web20 .rmRootGroup,
    div.RadMenu_Web20 a.rmLink,
    div.RadMenu_Web20 .rmText,
    div.RadMenu_Web20 .rmLeftArrow,
    div.RadMenu_Web20 .rmRightArrow,
    div.RadMenu_Web20 .rmTopArrow,
    div.RadMenu_Web20 .rmBottomArrow {
            background-image: none;
    }

    You can also take a look at the following help article where you can find more information on how to customize the look of the RadMenu control - Tutorial: Creating A Custom Skin Using Sprite.

    Regards,
    Kate
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    2 posts
    Member since:
    Oct 2013

    Posted 17 Dec 2013 Link to this post

    Thanks for the quick response Kate.  That definitely put me on the right path.  

    I have one more question.  On the flyout menus, the image has a different background than the text.  I would like to match that as well, but I'm having difficulty finding the style that's controlling that background.  Can you tell me where to find that?

    Thanks,
    Steve
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Dec 2013 Link to this post

    Hi Steve,

    Please try the following CSS which works fine at my end.

    CSS :
    <style type="text/css">
            .RadMenu_Web20 .rmGroup
            {
                background-image: none !important;
            }
    </style>

    Thanks,
    Shinu.
Back to Top