How to create a "chose language drop down menu" using twitter bootstrap?

Question

I am working on a project where I am using the excellent twitter bootstrap as a basis. Now I want to create a menu item where the visitor can choose what language the site should be displayed in. This has was not as easy as first expected and I wonder how I do the following.

1. Make the drop down menu item float to the right.
2. Include a small flag on the individual li items.
3. Make the active language show on the menu, meaning depending on which li item is active it should be in the menu.

in the menu.

All help is appreciated.

/Sten

Solution

1. To make the drop down menu float to the right add [ul class="nav pull-right"], this works on all menu items. Add it before the drop down.
2. I found the flag icons and a tutorial on how to integrate new css sprite icons in Twitter Bootstrap. It explains in a more comprehensive manner than I can, so I would suggest to follow the link.

http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily

3. I have not yet understood how to make the active link show up on top of the menu bar, but decided to work around the problem since I will have to create individual sites for all the different languages.

Comments

[StenW]

Thank you. You are right, was just tired of not understanding how to go about solving the problem. I solved the issue and will post the answer below.