CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
user3206082
user3206082

Reputation: 431

Twitter Bootstrap 3 - navbar-right issue in dropdown

I've created two dropdown using navbar-right.

Here's the fiddle for it.

Issue is... It is working fine in desktop and large screens.

If I resize the browser window. The dropdown gets in a list view with the entire width of the screen when re-sized.

Re-size the result window and you'll come to know my problem.

Help me to overcome this.

Thanks in advance.

Upvotes: 1

Views: 2334

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

This isn't really the way to use a Bootstrap navbar. The idea of the navbar is that it collapses down on mobile, which is what you're seeing happening here. Except, in the Bootstrap navbar, you are supposed to put some containers with specific class names and a <button> etc. You're code just seems to be using navbar-right for the sake of floating it right.

Try this instead. It's 1 list, each <li> has a dropdown. There's no navbar classes. Note that I've added the class nav. This just gives the <a> some padding and colouring on hover etc. You can remove that class and style as required. I also added the class 'pull-right' which is Bootstrap's helper class for floating right.

<div>
    <ul class="pull-right nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-comment"></i></a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-home"></i></a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">One</a></li>
                <li> <a href="#">Two</a></li>
                <li> <a href="#">Three</a></li>
            </ul>
        </li>
    </ul>
</div>

Some CSS

div > ul > li {
    float: left;
}

This won't be responsive like the navbar, but that seemed to be the problem in the first place.

DEMO

Upvotes: 2

Related Questions