This is a migrated thread and some comments may be shown as answers.

Custom mobile menu button - is it possible?

10 Answers 99 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 01 Sep 2014, 06:35 PM
I would like to replace the standard RadMenu mobile button icon (the three bars from RenderMode="mobile") with a custom image.

Is this possible?

10 Answers, 1 is accepted

Sort by
0
Accepted
Magdalena
Telerik team
answered on 02 Sep 2014, 01:46 PM
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.

 
0
Tomica
Top achievements
Rank 2
answered on 02 Sep 2014, 02:58 PM
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");
 
}
0
Magdalena
Telerik team
answered on 02 Sep 2014, 03:11 PM
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.

 
0
Tomica
Top achievements
Rank 2
answered on 02 Sep 2014, 03:20 PM
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?
0
Magdalena
Telerik team
answered on 03 Sep 2014, 12:47 PM
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.

 
0
Philip Gaffney
Top achievements
Rank 2
answered on 21 Jul 2016, 12:46 PM
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?
0
Magdalena
Telerik team
answered on 22 Jul 2016, 08:42 AM
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.
0
Alessandro
Top achievements
Rank 1
answered on 11 Dec 2017, 10:20 PM

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? 

 

0
Paulo Goncalves
Top achievements
Rank 2
answered on 07 Mar 2019, 06:59 PM

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

Thanks

0
Peter Milchev
Telerik team
answered on 12 Mar 2019, 12:08 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Menu
Asked by
Tomica
Top achievements
Rank 2
Answers by
Magdalena
Telerik team
Tomica
Top achievements
Rank 2
Philip Gaffney
Top achievements
Rank 2
Alessandro
Top achievements
Rank 1
Paulo Goncalves
Top achievements
Rank 2
Peter Milchev
Telerik team
Share this question
or