radmenu css styling question

2 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Oct 2015

    Posted 18 Nov 2015 Link to this post

    Hi, I have a radmenu and I want to remove the default gray background-image (PFA sample image), I tried few ways but that is also removing the arrows from the submenu, I want the arrows to be present, I only want the gray background image to be removed, below is the custom css.

    Also please let me know how to change the arrow color for the Radmenu_Default skin

    .RadMenu_Default, .RadMenu_Default .rmRootGroup, .RadMenu_Default a.rmLink {
    font-size: 16px !important;
    color: #ebe3e3 !important;
    border: 0px !important;
    background-color: #8F0800 !important;
    background-image: none !important;

    .RadMenu_Default .rmLink:hover, .RadMenu_Default .rmFocused,
    .rmLink .RadMenu_Default .rmSelected, .RadMenu .rmGroup .rmItem a.rmLink,
    .RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover, .RadMenu_Default .rmGroup {
    background-color: #C12610 !important;
    background-image: none !important;
    background-position: 0px 0px !important;
    border: 0px !important;

  2. Ivan Zhekov
    Ivan Zhekov avatar
    538 posts

    Posted 23 Nov 2015 Link to this post


    in classic render mode the arrow is part of the image sprite, so if you remove the background image (the gray thing) you remove the expand arrow.

    In light-weight render mode, however, the arrow is not part of an image and you can safely hide the background image.

    I am attaching two sample pages -- one lite one classic -- to show what happens and the styles you need to customize.

    Note: you need to have all instances of RadMenu on the page to be the same render mode.

    Also, I would suggest that you use a new skin (in light-weight rendering that's extremly easy) instead of building on top existing one, to avoid overriding lots of styles.

    Ivan Zhekov
    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
  3. DevCraft R3 2016 release webinar banner
Back to Top