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

Custom styles for Menu to remove borders

3 Answers 133 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 12 Sep 2014, 05:02 PM
The attached image shows two RadMenus. The first is mobile rendered menu with a custom sprite. Works great!

The second menu (WorldWideGarvin > Visualization) shows the second menu, which I use for both navigation and as a breadcrumb trail.

I have modified several "rm" styles starting with the base MetroTouch skin (latest release). Background effects are working fine.

I would also like to remove the borders entirely using the following code, which of course works for the white background but does not remove the borders or effects on the individual menu items. How do I make those go away so that only the menu title and image remain?

    }
 
.wwgItem {
    background-color: white;
    border-color:white;
    border-style:none;
    letter-spacing: .15em;
    font-size: 14pt;
 
    }
 
.rmFocused {

3 Answers, 1 is accepted

Sort by
0
Accepted
Magdalena
Telerik team
answered on 17 Sep 2014, 10:20 AM
Hi,

If you would like to remove the border only for an exact RadMenu, you can apply a custom class to that menu and use it in a CSS selector as the following:
aspx:
<telerik:RadMenu runat="server" CssClass="CustomClass" >
CSS:
html .CustomClass .rmGroup,
html .CustomClass .rmRootGroup {
    background: transparent;
}
 
html .CustomClass .rmRootGroup {
    border: 0;
}


Regards,
Magdalena
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tomica
Top achievements
Rank 2
answered on 14 Sep 2015, 09:16 PM

One year later, I'm trying the same thing but with the MetroTouch skin.

 In the attached image you will see two identical menu bars. (latest 2015 release of ASP.NET AJAX)

 They include PNG images 40 px high.

The top one uses MetroTouch skin.

 The bottom uses Bootstrap.

As you can see, the border for Bootstrap has gone away per the original CustomClass markup provided in the previous posting.

However, the intended skin is MetroTouch because I am targeting a touch device and like the spacing.

I know there are a few differences with the touch controls. I would like to make the borders go away, as above. In other words, the blue around the three menu items.

0
Accepted
Magdalena
Telerik team
answered on 17 Sep 2015, 09:56 AM
Hello Tomica,

You can apply the following CSS code snippet to remove border form the RadMenu control in the MetroTouch skin.
.RadMenu.CustomClass .rmRootLink {
    border: 0;
}


Regards,
Magdalena
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Menu
Asked by
Tomica
Top achievements
Rank 2
Answers by
Magdalena
Telerik team
Tomica
Top achievements
Rank 2
Share this question
or