Radmenu Responsive?

[DogBizPro]

I keep reading that the RadMenu is responsive, etc. I have added it to our page and when I resize the page the menu does not change. Does it only change if you are actually on a mobile device? Is there a way to have it change in the 'small' version like things do when you are using the RadPaygLayout control?

[Dimitar]

Hi,

The RadMenu features Elastic and Adaptive behavior. You may enable different rendering for desktop and mobile browsers. This is achieved by setting its RenderMode property to Auto.

With RenderMode="Auto" when viewed on a mobile device browser, controls would try to render in the following order of render mode fallback priority:
- Controls supporting Mobile would be rendered as Mobile;
- Controls supporting Lightweight render mode would be rendered as Lightweight;
- If a certain control does not support Lightweight, it will be rendered as Classic.

​In order for RenderMode="Auto" to work properly, you should add a reference to the RadDeviceDetectionFramework to your project, which would enable detection of mobile browsers on the server.

So if you complete the steps above, you should get Mobile RadMenu when viewed on mobile devices and Lightweight when viewed on desktop computers and notebooks.

I hope the above explains how RenderMode="Auto" works.

Note that the RadMenu would remain Lightweight on desktop browsers, no matter whether you make the browser window smaller or not. To overcome this in the Responsive Web Design Application, we have used two menus, one in Mobile and another in Lightweight. We are hiding one of them and showing the other with media queries, in order to put mobile menu on a desktop browser when the window is made smaller. You may download the application source code and check how it is implemented.

Since you are looking for a similar behavior to the RadPageLayout control, I would recommend you to try our new control - RadNavigation - released with Q1 2015. It features a button dropdown group and hides in it items, which cannot fit on its main strip. These changes are done client-side and the control would change its appearance on resizing the browser window as well. For further reference, you may browse the RadNavigation online demos and help articles.

Regards,
Dimitar
Telerik

[DogBizPro]

Thank you for the help. The RadNavigation looks promising except it looks horrible visually. I had the RadMenu looking nice with just setting the backcolor, color and a few others. I cannot get the RadNavigation to look 'nice. 

How do I get rid of all the padding? It does not need to be like 50+ pixels tall. If I set the height it cuts the words vs centering them and the mouse hover is off as well.....

Any ideas?

[Magdalena]

Hello Stephanie,

You can reduce RadNavigation height by customizing its padding for example by by the following:

html .RadNavigation .rnvRootLink {
    padding: 4px 10px;
}

html .RadNavigation .rnvMore {
    padding: 4px;
}

Regards,
Magdalena
Telerik