Creating bootstrap user menu like thenextweb.com - html

Question

I want to create a user menu, that looks like this:
When I create such a menu with bootstrap, its full width and not aligned under the button.
So it looks like this:
So how could I create such a menu with bootstrap?

Answer 1

I can't believe what I'm going to write, but you can't assume people knows your source code, you have to share what have you done. When you share the code, the community will be please to help. You can read this is real important: How do I ask a good question?. Don't think I'm a guy who thinks he know it all, you should check my reputation, at the beginning I asked a lot of similar questions to what are you asking.
Regarding your question. This article can be a lot of help. I'm sharing a small demo on how it looks.Demo: http://jsbin.com/figak/1 the design and everything is ugly, but it has what you want.
This is basically what I added. A form to the navbar-right.
I hope this helps you.
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</ul>
</li>
</ul>

Answer 2

Bootstrap is not enough for such case. Although it's really awesome framework, it won't do everything for you. My advice would be to read about javascript and client's side DOM manipulation.
In your case, I'd create special container with the form in it. Add then bootstrap's class hide to it so it won't appear at start and bind some action (click or hover) to icon which should trigger the menu show up.
I suggest to use jQuery

Answer 3

I work with Foundation, never with Bootstrap, but if all else fails you can make it absolute positioned:
.menu { position: absolute; top: 40px; left: 40px; width: 300px; }
...or you can keep it relative positioned (assuming that's what it is):
.menu { position: relative; width: 300px; margin-left: 40px; }
Change .menu to whatever the actual class is and you're good to go, you may have to override some functions. If the bootstrap class is still being applied you can add !important to the end of your class like so width: 300px !important; and it will work. Just keep in mind that should be last resort.
You can 'inspect element' in any new browser to see the code being used by bootstrap and then override those classes in your css file.
You can use media queries to keep the width at 100% on small screens but make it 300px on screens larger than 400px like so:
#media only screen and (min-width: 400px) {
.menu { position: relative; width: 300px; margin-left: 40px; }
}
Hope this helped!