Foundation - do not want to hide right button of navbar - css

Question

On wider screens my login button is visible, but on smaller screens it is hidden.
JSBIN http://jsbin.com/nowubuseqeza/1/edit?html,js,output
Relevant code:
<div class="top-bar" data-topbar="" style="background:#074e68">
<ul class="title-area">
<li class="name">
<h1><img class="left" src="images/pluslogo.png" style="margin:2px 1em;height:40px;width:40px" alt="Pacific Medical Training"> Pacific Medical Training</h1>
</li>
</ul>
<div class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
Login
</li>
</ul>
</div>
</div>
Is it possible to have this visible in all circumstances? Otherwise my users cannot login.

Answer 1

Change your code to this DEMO
<div class="top-bar" data-topbar="" style="background:#074e68">
<div class="top-bar-section right">
<!-- Right Nav Section -->
<ul class="right show-for-small">
<li class="active">
Login
</li>
</ul>
</div>
<ul class="title-area">
<li class="name">
<h1><img class="left" src="images/pluslogo.png" style="margin:2px 1em;height:40px;width:40px" alt="Pacific Medical Training"> Pacific Medical Training</h1>
</li>
</ul>
<div class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
Login
</li>
</ul>
</div>
</div>

Answer 2

In the smaller screen, a number of css properties are changing for the title-area and the links in the top-bar. If you add the following, it should bring the login button back on small screens:
//Only use it for screens under 40.063em, using the media query
#media only screen and (max-width: 40.063em) {
.top-bar .name h1 a {
width: auto;
}
.top-bar-section ul {
width: auto;
}
.top-bar-section ul li.active > a {
padding: 0px 15px;
line-height: 45px;
}
.top-bar .title-area {
float: left;
}
}
However, it may need a bit more refinement for very small screens where the "Pacific Medical Training" takes up the whole top-bar and pushes the login button down