Home » Html » Changing the direction of a Bootstrap dropdown

Changing the direction of a Bootstrap dropdown

Posted by: admin January 2, 2018 Leave a comment

Questions:

How can I change the direction of a Twitter Bootstrap dropdown?

I have a dropdown like this:

What I have

But I want it to look like this:

What I want

Answers:

Use pull-right or pull-left classes.

Questions:
Answers:

From http://getbootstrap.com/components/#dropdowns-alignment:

Deprecated .pull-right alignment
As of v3.1.0, we’ve deprecated
.pull-right on dropdown menus. To right-align a menu, use
.dropdown-menu-right. Right-aligned nav components in the navbar use a
mixin version of this class to automatically align the menu. To
override it, use .dropdown-menu-left.

In your case, adding dropdown-menu-right class to the div that has the dropdown-menu class should do the trick.

Questions:
Answers:

Here it is (using dropdown-menu-right):

<ul class="dropdown-menu dropdown-menu-right">
   <li><a href"#">Action</a></li>
   <li><a href="#">Another action</a></li>
<ul>

Questions:
Answers:

transform: rotateY or -webkit-transform:rotateY will do the trick, let’s apply it for the dropdown menu;

navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
    -webkit-transform: rotateY(180deg);
}

Or you can insert this into .dropdown-menu or .open > .dropdown-menu classes due to your exact rquirement. Now it looks like:

drop1

As can be seen all links need to be reverted so it’s simple to do with same CSS rule:

.dropdown-menu > li > a {
    -webkit-transform: rotateY(180deg);
}

Now it’s looking like:

drop2

Needs a bit cleanup via changing dropdown-menu’s position by left:10px; and it will look like exactly how you wanted:

final result

Questions:
Answers:

There seem to be no option in Twitter Bootstrap to handle the direction on the dropdown. All that has some effect on the position of the arrow is this class .navbar .nav > li > .dropdown-menu:before Try fiddling with it to view changes in the direction of the drop down