MVCSiteMapProvider MVC 5 with Bootstrap 3.2

Question

My team and I are currently working on a project. We initially started with the default Bootstrap version, which was 3.0 at the time. Recently we decided to update some of the NuGet packages that we had installed, including MVCSiteMapProvider. When we did so however, our navigation no longer worked when collapsed on the iPad and iPhone. It was working fine before the update. Whenever I try to click/tap the 3-bar menu, it slides down for a half second then slides up again. We have no idea what to do on this.

Here is how my pages are setup:

_Layout.cshtml:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application Name", "Index", "Home", null, new { @class = "navbar-brand" })
        </div>

        @Html.MvcSiteMap().Menu("BootstrapMenuHelperModel")

    </div>
</div>

MenuHelperModel.cshtml:

@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models

<ul id="menu" class="nav navbar-nav">
    @foreach (var node in Model.Nodes) { 
        <li>@Html.DisplayFor(m => node) 
            @if (node.Children.Any()) {
                @Html.DisplayFor(m => node.Children)
            }
        </li>
    }
</ul>

BootstrapMenuHelperModel.cshtml:

@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models

@helper TopMenu(List<SiteMapNodeModel> nodeList)
{
    @:<div class="collapse navbar-collapse"><ul class="nav navbar-nav">
        foreach (SiteMapNodeModel node in nodeList)
        {
            string url = node.IsClickable ? node.Url : "#";

            if(!node.Children.Any())
            {
               @:<li class="menu-item"><a href="@url">@node.Title</a></li>
            }
            else
            {
                @:<li class="menu-item dropdown"><a href="@url" class="dropdown-toggle" data-toggle="dropdown">@node.Title<b class="caret"></b></a>@DropDownMenu(node.Children)</li>
            }

            if(node != nodeList.Last())
            {
                @:<li class="divider-vertical"></li>
            }
        }
    @:</ul>@Html.Partial("_LoginPartial")</div>
}

@helper DropDownMenu(SiteMapNodeModelList nodeList)
{
    <ul class="dropdown-menu">
        @foreach(SiteMapNodeModel node in nodeList)
        {
            if(node.Title == "Separator")
            {
                @:<li class="divider"></li>
                continue;
            }

            string url = node.IsClickable ? node.Url : "#";

            if(!node.Children.Any())
            {
                @:<li class="menu-item"><a href="@url">@node.Title</a></li>
            }
            else
            {
                @:<li class="menu-item dropdown dropdown-submenu"><a href="@url" class="dropdown-toggle" data-toggle="dropdown">@node.Title</a>@DropDownMenu(node.Children)       </li>
            }
        }
    </ul>
}

@TopMenu(Model.Nodes)

The CSS file:

.dropdown-submenu {
position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }
    /*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/
    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }

   .dropdown-submenu:hover > a:after {
       border-left-color: #ffffff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

       .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
   .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

All of the other MVCSiteMapProvider files are the same.

The BootstrapMenuHelperModel was set up that way to allow drop down menus as they are necessary for our website. I'm not sure what to do in this case. I have looked around but I haven't seen anything specific in this case. Like I said, these files were making the site work as they were without any other modifications.

If anyone has any idea on what it wrong, I would greatly appreciate your help.

Answer 1

I realized what the problem was. I removed the media query in the CSS file and everything works as it should. I guess Bootstrap 3.2 was having issues with it whereas 3.0 accepted it perfectly. I still haven't figured out exactly why that stopped working but anyone has any ideas they want to share, I would appreciate it. It would be helpful for future reference.