The issue is happening because the bootstrap css class "navbar-right" has condition to apply float right only if the screen resolution has minimum width of 768 px. Because of this, when the resolution goes below the width 768 px, float is not applied.

You can fix this issue by writing media query and set the float : right for the smaller resolution. You can use either of the below solution. But, the first solution will apply this style whenever you use navbar-right class. But the second approach will apply float right in smaller resolution only in the particular scenario.
Approach 1:
@media screen and (min-width: 0px) and (max-width: 640px) {
.navbar-right
{
float:right;
}
}
Approach 2:
@media screen and (min-width: 0px) and (max-width: 640px) {
.login-mobile-navbar-right
{
float:right;
}
}
apply this css class to the html ul element as below
<div class="navbar-collapse login-navbar-collapse" >
<ul class="nav navbar-nav navbar-right login-mobile-navbar-right" >
<!-- Other html elements -->
</ul>
</div>