Custom mobile menu button - is it possible?

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

    Posted 01 Sep 2014 Link to this post

    I would like to replace the standard RadMenu mobile button icon (the three bars from RenderMode="mobile") with a custom image.

    Is this possible?
  2. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 02 Sep 2014 Link to this post

    Hi Tomica,

    The mobile menu icon can be changed by the selector html .RadMenu .rmRootToggle:before in several ways:
    • As the images are rendered by font-icon, you can simply change the content property of the :before pseudo element by the following
      html .RadMenu .rmRootToggle:before {
          content: "\E094";
      }
    • If you would like to use a font icon of your custom font, you can change the font-family property. Please, keep in mind that if you would like to be sure of displaying the font-icon in all browsers, you can import the custom font files. You can find more information about this approach in the w3c documentation
      html .RadMenu .rmRootToggle:before {
          font-family: 'Times New Roman';
          content: "\02e19";
      }
    • You can also replace the font icon with a sprite image by the following
      html .RadMenu .rmRootToggle:before {
          content: "";
          background-image: url(image.png);
      }

    Hoping this was helpful


    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 02 Sep 2014 in reply to Magdalena Link to this post

    I have had some success.

    I experimented and found that a 40x40 image works well, but the default black bars remain as shown in the attached image.

    .RadMenu .rmRootToggle:before
    {
        content: "";
        background-image: url("images/wwg_logo_40.jpg");
     
    }
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 02 Sep 2014 Link to this post

    Hi Tomica,

    The font-icon is added by a ".RadMenu .rmRootToggle:before" selector by our inbuilt styles which are applied after your custom styles. Therefore you have to make your selector stronger for example by adding a html to the selector as we advised in the last reply.

    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.

     
  6. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 02 Sep 2014 in reply to Magdalena Link to this post

    I see that now, I had overlooked the HTML prefix. Most of my previous CSS overrides for other controls such as PanelBar did not need it, or they used an !important modifier.

    Problem corrected, thanks.

    Now a question about scaling of the sprite: by experimentation I found that 40x40 worked well with the JPG sprite.

    On smaller devices without (yet) using a Viewport directive, I find that sprite does not scale down proportionately, there is a loss of pixels on the right and bottom, I would guess maybe 4px each on a Windows 8.1 phone.

    I realize that font icons were most likely used due to easy scaling, but in my case I can live with a few cosmetic issues for now, until I move to adaptive rendering.

    Is there anything that I might need to know about background images for RadMenu in mobile rendering?
  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 03 Sep 2014 Link to this post

    Hello Tomica,

    You can re-size the background image by setting the property background-size to 100% to the same element. Please, keep in mind that this property is not supported all browsers.

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

    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.

     
  8. Jonathan
    Jonathan avatar
    2 posts
    Member since:
    Jun 2013

    Posted 21 Jul Link to this post

    I've just used the solution mentioned in this thread, to change the icon of the RadMenu mobile button to a 'cog' to indicate a settings menu.  The question I have further to this is if I wanted another menu button on the same page, but instead wanted it to have a different icon on it, is it possible to have two RadMenu mobile buttons on the same page, but with different icons?
  9. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 22 Jul Link to this post

    Hello Jonathan,

    If you set different CssClass server property to the Menus, you can use those classes in CSS selectors. The other solution is to use their IDs as the following:
    aspx:
    <telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Mobile" CssClass="customClass1"></telerik:RadMenu>
     
    <telerik:RadMenu ID="RadMenu2" runat="server" RenderMode="Mobile" CssClass="customClass2" ></telerik:RadMenu>


    CSS:
    #RadMenu1 .rmRootToggle:before {
        content: "";
        background-image: url('image01.png');
    }
    #RadMenu2 .rmRootToggle:before {
        content: "";
        background-image: url('image02.png');
    }

    OR

    html .customClass1 .rmRootToggle:before {
        content: "";
        background-image: url('image01.png');
    }
    html .customClass2 .rmRootToggle:before {
        content: "";
        background-image: url('image02.png');
    }


    Regards,
    Magdalena
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017