Custom styles for Menu to remove borders

4 posts, 2 answers
  1. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 12 Sep 2014 Link to this post

    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 {

  2. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Sep 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 14 Sep 2015 in reply to Magdalena Link to this post

    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.

  5. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Sep 2015 Link to this post

    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
Back to Top