Using bootstrap nav for desktop and mmenu for mobile (sticky nav bar)

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 acterry

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">
<script src="http://mmenu.frebsite.nl/mmenu-1.4.1/jquery.mmenu.min.js"></script>
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mmenu-1.4.1/mmenu.css">
    <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>
    <nav...

CSS

.mmenu-page {
    padding-top: 80px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}
/* Push down the sidebar menu so that first item is not covered up by sticky navbar */
#mainSiteMenuMMenuNav.mmenu-opened {
    top: 50px;
}
/* Only added to force the bullets to show up for my demo explanation */
ul, ol {
  list-style-type: disc;
}


/* force the top navbar to stick to top of window when you scroll down*/
@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;
    }
}

JavaScript

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