Burger menu styling - backgrounds

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

    Posted 31 Mar 2015 Link to this post

    I have attached two views of a standard menu with default Metro Touch skin and mobile rendering mode.

    When activated, I am happy to see that there is a transparent effect which blends very well with my page element.

    When closed, I would like to get rid of the gray background, leaving just the black slices.
  2. Answer
    Magdalena avatar
    412 posts

    Posted 01 Apr 2015 Link to this post

    Hello Thomas,

    Thank you for contacting Telerik support.

    Applying the following CSS you will achieve transparent background to the RadMenu in mobile render mode:
    html .RadMenu_MetroTouch .rmRootToggle {
        border: 0;
        background: transparent;
        box-shadow: none;

    If you would like to set different effect to the expanded menu, you can achieved it by the selector "html .RadMenu_MetroTouch .rmRootToggle:active, html.RadMenu_MetroTouch .rmRootToggle.rmExpanded"

    Do not hesitate to contact us if you have other questions.


    See What's Next in App Development. Register for TelerikNEXT.

  3. DevCraft R3 2016 release webinar banner
  4. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 01 Apr 2015 in reply to Magdalena Link to this post

    This code solves my requirement.

    I also note that my comment on apparent transparency for expanded mobile rendering was not quite accurate. The skin provides the blue, for which I matched the background a few months ago, and promptly forgot.
Back to Top