This is a migrated thread and some comments may be shown as answers.

RadMenu Styling and Levels

3 Answers 60 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 17 Dec 2013, 03:25 PM
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

3 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 17 Dec 2013, 04:13 PM
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.
0
Steve
Top achievements
Rank 1
answered on 17 Dec 2013, 07:47 PM
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
0
Shinu
Top achievements
Rank 2
answered on 18 Dec 2013, 05:40 AM
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.
Tags
Menu
Asked by
Steve
Top achievements
Rank 1
Answers by
Kate
Telerik team
Steve
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or