Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
67 lines (47 sloc) 1.33 KB

jQuery Mobile navigation

Transform your main navigation into a select object for mobile browsers.



Download jquery.mobileNav.js (required jQuery)


You can also change the default Parameters


    classNav: 'mobile-nav', // class of the select navigation
    idNav: 'mobile-nav', // id of the select navigation
    container: $('.header nav'), // element wrapping the select navigation
    label: 'Navigation', // text value on first option select nav



Of course you can change the CSS for your consideration

    .mobile-nav {
      display: none; /* hide the select nav by default */
    @media only screen and (max-width: 781px) {
      .menu {display: none;} /* hide the main navigation */
      .mobile-nav {display: block; min-width: 460px;} /* show the select navigation */
    @media only screen and (max-width: 481px) {
      .mobile-nav {min-width: 320px;} /* change width for smaller screen */


Vincent Bianciotto

Copyright and licence

Dual licensed under MIT and GPL.

Something went wrong with that request. Please try again.