Hamburger menu dropdown on the right side - html

Question

I'm trying to position the hamburger menu on the right when I click on it, but I'm not managing to adjust the CSS for that.
I have this HTML code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="navbar-header">
<p class="navbar-text navbar-right">
Username
</p>
</div>
</div>
</nav>
Ad this CSS:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
How to adjust this CSS so that the hamburger menu is on the right when clicking on it? The padding of the boxes must be appropriate to the size of the words inside it. Like this:
It's okay if it overwrites the space under it.
I need a solution that uses this CSS code, only. See more here.
Thanks.

Answer 1

Change collapse.in selector to
.collapse.in{
display:block !important;
position:absolute;
float:right;
right: 0;
}