Custom mobile menu button - is it possible?

[Tomica]

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

Is this possible?

[Magdalena]

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

 

 

[Tomica]

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");

}

[Magdalena]

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

 

 

[Tomica]

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?

[Magdalena]

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

 

 

[Philip Gaffney]

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?

[Magdalena]

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

[Alessandro]

I tried to replace the default image of the RadMenu (RenderMode="Mobile", Skin="MetroTouch" mobile button icon writing in my css: 

.RadMenu_MetroTouch.t-rwd-menu-mobile .rmRootToggle:before
{line-height: 36px; content: ""; background-image: url('../images/spr.png')}

but nothing, nothing changes...

Basically, i would like to have the image of that mobile menu with the 3 bars and nothing else (white background, no border) and a little bit smaller (36x36) than the default way the icon is shown. 

Can anyone help, pls? 

 

[Paulo Goncalves]

How I change the menu icon at code behind ? I would like change to a facebook picture for each logged user.

Thanks

[Peter Milchev]

Hello Paulo,

The server-side object does not have any properties to change the toggle button image. Also, keep in mind that the "hamburger" icon is actually a font-icon, not an image. 

With that said, the CSS that manages to show a custom image instead of the font icon is as follows: 

<style>
    div.RadMenu .rmRootToggle,
    div.RadMenu .rmRootToggle.rmExpanded {
        background-image: url("https://via.placeholder.com/32");
        height: 40px;
    }

        div.RadMenu .rmRootToggle:before {
            content: none;
        }
</style>

Regards,
Peter Milchev
Progress Telerik