Making menu responsive...

[Rene]

I have a menu where I wanted to make the text labels hidden and only have the top menu item choices show the image when the screen / client area is a smaller size and found it actually pretty easy to do:

<style type="text/css">
@@media only screen and (max-width: 920px){
    #RootMenu .menuItemText { display:none; visibility: hidden;}                 
 }
</style>

and for the menu:

 @(Html.Kendo().Menu()        
                .Name("RootMenu")
                .HtmlAttributes( new {style="white-space:nowrap;overflow:hidden;max-height:38px;"} )
                .HighlightPath(false)
                .Orientation(MenuOrientation.Horizontal)
                .Items(items => {
                  
                    items.Add().Text("<span class='menuItemText'>Home</span>").Action("Index", "Home").ImageUrl("~/Images/home-white-24.png").Encoded(false);
                 })
        
 )

The key is to wrap the menu item text in span with a classname and making sure .Encoded(false) is set.

From there the media query will do the rest.

Have it working quite nicely at http://www.renepilon.com

[Dimo]

Hello Rene,

Thank you for your contribution. Yes indeed, using CSS media queries is a good way to achieve a responsive layout. By the way, setting display:none makes using visibility:hidden unnecessary.

Regards,
Dimo
Telerik

[Mark]

Hi Rene,
You site looks good, but the menu doesn't work on my Nokia Lumia 1020.  It changes to the bars image/font on the left side, but nothing happens when I try to click it.  That is using IE.  I didn't try with another browser.

Regards,
Mark

[Rene]

Hi Mark,

thanks for the feedback. 

The "3 bar" menu at top left is not a Kendo menu, it's actually from the following:

http://tympanus.net/Tutorials/AnimatedBorderMenus/index2.html

Thanks again,

Rene.

[Rene]

I do use:

<meta http-equiv="X-UA-Compatible" content=IE=edge,chrome=1">

I wonder if it's related to that?

If you get a chance - do the menus as per the link above work on your Lumia with IE?

Thanks agian.

Rene.

[Rene]

Btw, the menu is somewhat of an "illusion"... when the menu opens up - what is actually showing up is them making the left border wide (ie 200px) with a list on the border.  It's pretty cool.

[Mark]

Hi Rene,
I had a look at the animated menu link on my desktop and it works fine.  I loaded it on my Lumina and it doesn't work.

For your website, only the 3 bars and the word Build is visible and a wallpaper, nothing else loads.

Your site looks great by the way.

Regards,
Mark