#menu normal + select pour les mobiles #http://www.catswhocode.com/blog/5-powerful-techniques-for-responsive-web-design <nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href="/pages/about-us">About Us</a></li> <li><a href="/pages/support">Support</a></li> </ul> <select> <option value="" selected="selected">Select</option> <option value="/">Home</option> <option value="/collections/all">Books</option> <option value="/blogs/five-simple-steps-blog">Blog</option> <option value="/pages/about-us">About Us</option> <option value="/pages/support">Support</option> </select> </nav> And here is the CSS. Nothing complicated here: We hide the <select> by default, and only show it if the document width is smaller than 960px. nav select { display: none; } @media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; } }