Change Formatting Style Of The Menu

[Seth]

I have the menu built into a header on my application.  I am using the new Glow skin and I would like to remove the border around the menu.  What style do I need to override to remove that border?

[Princy]

Hi,

Try the following CSS.

CSS:

html .RadMenu_Glow .rmRootGroup
{
 border: 0 none !important;
}

Thanks,
Princy.

[Clive Hoggar]

Hi

 

This is an old post but I am re-visiting a legacy application using Q3 2013 controls, in particular the GLOW menu.

The code below changes the background colour but leaves a black border, which I want to get rid of. What am I doing wrong here?

Thanks

.RadMenu_Glow .rmText
    {
        background-color: #005daa !important;
    }
 .RadMenu_Glow .rmRootGroup
{
 border: 0 none !important;
}

[Magdalena]

Hi Clive,

We have applied the CSS to the RadMenu in classic render mode (as the styles seems to be not adapted to lightweight render mode), but there is not a black border around the menu. We are sending you this video for your reference. Could you please modify the sample project in the attachment and open a support ticket to be able to send back us a modified version where the issue is reproduced?

Regards,
Magdalena
Telerik

[Clive Hoggar]

Hi Magdalena

Thanks for the video, and I get exacty the same result running the page on my machine.

I don't have any support ticket credits available to me so I can't send a running example, but in any case when I paused on the demo, and zoomed in, I could still see a slight grey border (see attached screenshot), but it is not very noticeable on a white background.

However when I added a div round the menu in your demo to put the menu on the same blue background as here:

<div style="height:40px; background-color: #005daa; padding-top:3px; padding-left:10px;">

        <telerik:RadMenu runat="server" Skin="Glow" RenderMode="Classic">
            <Items>
                <telerik:RadMenuItem Text="Item" />
                <telerik:RadMenuItem Text="Item" />
                <telerik:RadMenuItem Text="Item" />
                <telerik:RadMenuItem Text="Item" />
                <telerik:RadMenuItem Text="Item" />
            </Items>
        </telerik:RadMenu>

</div>

I get a more conspicuous (darker border) border. See attached screenshot.

It seems like the border of some kind is still there.

 

Thanks for your support!

 

Clive

 

[Magdalena]

Hello Clive,

We have succeeded to reproduce the issue. The "border" is not a border, but shadows. It can be removed by applying the following CSS:

html .RadMenu_Glow .rmRootGroup {
    box-shadow: none;
}

Regards,
Magdalena
Telerik

[Clive Hoggar]

Thanks for this gem! 

In summary, what works to have no 'border' at all is

.RadMenu_Glow .rmRootGroup {
    box-shadow: none !important;
    border: none !important;
}

 

Regards

Clive