How to make sub-nav show at thinnest style-sheet width (like a phone)

Right now when I visit your URL above and resize the browser to mobile phone width, the navigation items are visible and full-width and looking good.

They look fine to me.  Do you want to hide the navigation instead when it's on a mobile viewport size?  If so, you'll need to include some kind of button or trigger that is only shown on small screens and when pressed shows the full-width navigation list.  If that's indeed what you want, then you could add a new navigation item to your #nav_876378 main nav list element:

<li class="toggle-menu"><a href="#">Menu</a></li>

Then, you'll want to add the following to your /_assets/css/screen.css file you could include it where the other #nav css declarations are or put it at the end of the css file:

#nav ul li.toggle-menu {
     display: none;
}

@media screen and (max-width: 767px) {
     #nav ul li {
          display: none;
     }
     #nav ul li.toggle-menu {
          display: inline;
     }
     #nav.extended ul li {
          display: inline;
     }
}

Once you've got that code in your CSS file, now you'll want to add some javascript that says, "when the user clicks the menu toggle button, toggle a class of extended to our #nav element" and you'll see in the css above that when our javascript adds that class of "extended" on our #nav element we tell it to show those navigation list items in a mobile viewport.

You can add this javascript to your "/_assets/js/hotpress-config.js" file or, if you know where your site template is including the navigation element, you could include this script after the #nav element in your template, too.

<script>
     $(document).ready(function() {
          var nav = $("#nav");
          $("#nav .toggle-menu a").on("click", function(e) {
               e.preventDefault();
               nav.toggleClass("extended");
          });
     });
</script>

Note: if you are adding this javascript to a js file, you can scrap the <script> tags.

For Bonus points: 

• In your "#nav ul li.toggle-menu" CSS rule, show a menu icon as the background image and hang it to the right with "background-position: right 50%".
• Add some CSS3 transitions to one of the properties for "#nav ul li" for mobile viewports only...