Issues getting nav to be responsive - html

Question

I am trying to make my navbar look good on mobile devices and for it to be responsive. However, it looks horrible right now via mobile and all mushed together. Is there anyway I could make this look any better without making the links crazy small?
Please look at it via mobile at a page I made up for everyone to see on here..
sundayfundayleague.com/show_nav.php
For some reason in the page I created, all of these links are not showing up in the navbar..
<li>
Draft Selection
</li>
</ul>
</div>
<div class="nav_right">
<ul>
<li>
<?php echo escape($user->data()->username); ?>
</li>
<li>
Messages
</li>
<li>
Admin
</li>
<li>
Log Out
</li>
</ul>
</div>
Usually it will just compress all of the links and it looks awful.
What can I do to make all the things show up and for it to look good?
This is my media query for the header/navbar...
.spectator_header {
position: relative;
height: 200px;
}
.spectator_nav {
height: 75px;
background-color: #800000;
left: 2%;
display: inline;
bottom: 0;
position: absolute;
width: 95%;
font-size: .7em;
font-style: Helvetica;
-moz-border-radius: 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
-webkit-box-shadow: 0px 0px 16px #C0C0C0;
-moz-box-shadow: 0px 0px 16px #C0C0C0;
box-shadow: 0px 0px 16px #C0C0C0;
}
.spectator_nav li a {
text-decoration: none;
display: block;
}
.spectator_nav li:hover ul {
display: block;
}
.spectator_nav ul {
padding: 0px;
}
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
padding: 25px 4px;
}
.spectator_nav li:first-child {
margin-left: 5px;
}
.spectator_nav li:last-child {
margin-right: 5px;
}
.spectator_nav ul:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}

Answer 1

Mobile nav can be very tricky and there are lots of ways to approach it. I'd recommend looking at some resources like This Is Responsive or CSS-Tricks to get some ideas on how to tackle this. There are lots of options so find one that works for you.
The reason not all the links are showing is because the last one is breaking to a new line. Since the container has a fixed height of 75px and there's so much padding around the <li>s you can't see the link on the second line. That's part of why mobile nav is tricky, when you have too many links to comfortably fit on a horizontal line you have to decide how to handle it.
Do you want to your nav to grow to multiple lines, or switch to a hamburger or select menu? Do you want to just cram all the links on a single line no matter what? Do you need to allow for adding more nav links or changing the font size or weight in the future? This would add length to the nav list and affect the approach you want to take. If you have more info I can point you to a good solution, but if your question is simply "how do I make this responsive?" then you need to ask more questions first.