Bootsnip Account in Navbar dropdown menu nav button taking full width on mobile phone resolution

Question

I am using bootstrap bootsnip "Account in Navbar" dropdown menu code snippet to display user signin form when Signin button clicked. I have done some tweak on that snippet based on my need.

It is working as expected and displayed right aligned when I use it in the desktop resolution. But If reduce the resolution to small media (Phone) resolution, NavBar button is taking the whole width of my parent div. Any help would be appreciated.

Desktop resolution output

Mobile Phone resolution output

Here is the sample code

<div class="navbar-collapse login-navbar-collapse" >
    <ul class="nav navbar-nav navbar-right" >
        <li class="dropdown" >
            <a href="#"  rel="nofollow"  class="dropdown-toggle"  data-toggle="dropdown" >
                <span class="glyphicon glyphicon-user" ></span>
                <span>Signin</span>
                <span class="glyphicon glyphicon-chevron-down" ></span>
            </a>
            <ul class="dropdown-menu login-dropdown" >
                <!-- My Signin form content -->
            </ul>
        </li>
    </ul>
</div>

Answer 1

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>