u need to change the code
the menu items are not part of the responsive design, I dont know why?
add the following
@if (supportResponsive)
{
if (Model.Categories.Count > 0)
{
<div id="mob-menu-button">
<a href="">
<span class="icon"><span class="line"></span><span class="line"></span><span class="line"></span></span>
<span>@T("Categories")</span>
</a>
</div>
<ul class="mob-top-menu">
@Html.Widget("mob_header_menu_before")
@foreach (var category in Model.Categories)
{
@RenderCategoryLine(category, 0, true)
}
@*do not display default menu items when we don't have any category to display*@
@Html.Widget("mob_header_menu_after")
</ul>
}
else
{
<div id="mob-menu-button">
<a href="">
<span class="icon"><span class="line"></span><span class="line"></span><span class="line"></span></span>
<span>@T("Menu")</span>
</a>
</div>
<ul class="mob-top-menu">
//no categories to display? in this case let's diplay some default menu items (should we?)
<li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
if (Model.RecentlyAddedProductsEnabled)
{
<li><a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
</li>
}
<li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
<li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
if (Model.BlogEnabled)
{
<li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
}
if (Model.ForumEnabled)
{
<li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
}
<li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
</ul>
}
<script type="text/javascript">
$('a', $('#mob-menu-button')).toggle(function() {
$('.mob-top-menu').addClass('show');
},
function() {
$('.mob-top-menu').removeClass('show');
}
);
$(function($) {
$('.mob-top-menu .expand').click(function() {
var parent = $(this).parent();
if (parent.hasClass('active')) {
$(".sublist:first", parent).hide(300);
parent.removeClass('active');
} else {
$(".sublist:first", parent).show(300);
parent.addClass('active');
}
});
});
</script>
}