The Select Menu

So this method is way easier than I thought it would be. I used a jQuery plugin called TinyNav. It was crazy easy to install. You include the JS file after you load your version of jQuery, then wire it up like this:

<script>
$(function () {
  $("#nav").tinyNav();
});
</script>

Then you simply add a few lines to your CSS. You first hide the tinynav class, then you'll set it to display at whatever breakpoint you want:

/* styles for desktop */
.tinynav { display: none }

/* styles for mobile */
@media screen and (max-width: 600px) {
	.tinynav { display: block }
	#nav { display: none }
}

The CSS:


nav.example-nav { padding: 1em 0; }
ul.dropdown { list-style: none; padding: 0px; margin: 0px; font-weight: bold; position: relative; text-align: center; }
nav > ul.dropdown:after { content: ""; clear: both; display: block; }
ul.dropdown li { display: inline-block; text-align: left; }
ul.dropdown li a { display: block; padding: 5px 10px; text-decoration: none; color: #444; }
ul.dropdown li a:hover { background-color: #ccc; }
    
ul.dropdown ul { display: none; position: absolute; top: 100%; background-color: #f4f4f4; margin:0; padding:0; min-width: 250px; }
ul.dropdown li:hover > ul { display: block;  }
    
ul.dropdown ul li { float: none; display: block; position: relative; }
    
ul.dropdown ul ul { position: absolute; left: 100%; top:0; }
    
.tinynav { display: none; margin: 0px auto; }
    
@media screen and (max-width: 768px) {
  .tinynav { display: block }
  .dropdown { display: none }
}