Toogle menu for mobile

[Damodar]

Hi All,

Is it possible to show text instead of the toggle icon while rendering for mobile?

Best Regards,
Damodar

[Dimitar]

Hi Damodar,

As the Mobile RadMenu uses a font icon, you could easily change its content. Just use the following sample CSS for a RadMenu with RenderMode="Mobile":

html .RadMenu .rmRootToggle:before {
    content: "MENU";
}

html .RadMenu .rmRootToggle:before {
    width: auto;
    padding: 0 10px 5px;
    position: static;
}

html .RadMenu .rmRootToggle {
    width: auto;
    height: auto;
}

The following screenshot shows the result. You may need to edit the CSS to fit your custom Menu text.

You may find additional information about the toggle icon customization in the following forum thread:
http://www.telerik.com/forums/custom-mobile-menu-button---is-it-possible

Regards,
Dimitar
Telerik

 

 

[Damodar]

Hi Dimitar,

Thanks for the quick response.
I have RenderMode="Auto" and I want to show "MENU" Text when they visit the page with mobile device.
Or when they resize the window less than  760px.
HTML
<div id="MenuContainer" class="centeredText">
        <telerik:RadMenu ID="RMenu" runat="server" RenderMode="Auto" ShowToggleHandle="True" Skin="MetroTouch" OnClientItemClicking="OnClientItemClicking">
            <Items>...</telerik:RadMenu></div>
CSS
html .RadMenu .rmRootToggle:before {
    width: auto;
    padding: 0 10px 5px;
    position: static;
}
@media only screen and (max-width: 760px) {
    html .RadMenu .rmRootToggle:before {
                 content: "MENU"; width: auto; padding: 0 10px 5px; position: static;}
    html .RadMenu .rmRootToggle {
        width: auto;
        height: auto;
    }    
}

Best Regards,
Damodar

[Dimitar]

Hi again,

In a week or two we have a planned Q1 2015 official release coming. This release would feature a new control called RadNavigation. It is designed to handle scenarios where customers want to have a mobile menu on window resize.

Currently, this could be achieved by using two menus, one in Lightweight and one in Mobile render mode, and hiding one of them with media queries, while showing the other.

I would recommend you to wait for the upcoming official release and try the RadNavigation control instead. There will be demos with the release, which would help you to quickly explore the new control and its functionalities.

Best regards,
Dimitar
Telerik