Using bootstrap nav for desktop and mmenu for mobile

Demo on how to use Twitter Bootstrap's native navbar for desktop browsers and replacing it with mmenu for smaller screens Provided as answer for this question on Stack Overflow: http://stackoverflow.com/questions/16892946/integrating-mmenu-within-bootstrap/

by panchroma

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mmenu-1.4.0/mmenu.css">
<script src="http://mmenu.frebsite.nl/mmenu-1.4.0/jquery.mmenu.min.js"></script>
<div>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="visible-desktop navbar-inner">
            <div class="container">
                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->	<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</a>
	<a class="brand" href="/">My Site</a>

                <!-- Everything you want hidden at 940px or less, place within here -->
                <div class="nav-collapse collapse">
                    <ul class="nav" id="mainSiteMenu">
                        <li><a href="#">Home</a>

                        </li>
                        <li><a href="#">Link 1</a>

                        </li>
                        <li><a href="#">Link 2</a>

                        </li>
                        <li><a href="#">Link 3</a>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="hidden-desktop navbar-inner">
            <div class="container">
                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->	<a class="btn btn-navbar" href="#mainSiteMenuMMenuNav">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</a>
	<a class="brand" href="/">My Site</a>

            </div>
        </div>
    </div>
   ...

CSS

.mmenu-page {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}
@media (max-width: 979px) {
    /* Enable use of floated navbar text */
    .navbar-text.pull-right {
        float: none;
        padding-left: 5px;
        padding-right: 5px;
    }
    .navbar-fixed-top, .navbar-fixed-bottom {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
    }
    ul, ol {
        list-style-type: disc;
    }
}

JavaScript

$(function () {
    $("#mainSiteMenuMMenuNav").append($("#mainSiteMenu").clone().attr("id", "mainSiteMenuMMenu").attr("class", ""));
    $("#mainSiteMenuMMenuNav").mmenu({
        configuration: {
            pageNodetype: "div"
        }
    });
});