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

0 votes
asked Sep 24, 2014 in bootstrap by anonymous

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

desktop resolution output

Mobile Phone 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>
Share

1 Answer

+1 vote
answered Sep 24, 2014 by Aadhira (1,213 points)
selected Sep 24, 2014 by administrator
 
Best answer

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.

bootstrap css class navbar right

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>

Your answer

Preview

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2015 pinfaq.com
...