How do I keep a HTML element fixed at a position? - html

Question

I'm trying to create a portfolio in which when the user scrolls, a small bar icon is visible and fixed. On clicking, it should display the tools in navigation bar like "about me, contact me".
I tried using position: fixed; but it isn't working.
and I can't seem to get this bar icon to the left side of the page. Tried giving it different margin and padding and the drop down isn't working either.
.fa {
transform: scale(0.5,0.5);
}
.dropdown{
position: fixed;
}
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle pull-left" type="button" id="menu1" data-toggle="dropdown"><i class="fa fa-bars" aria-hidden="true"></i></button>
<span class="caret"></span></button>
<nav role="navigation">
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>

Answer 1

.dropdown not must be child another elem, except body
body {
position: relative;
}
.dropdown{
position: fixed;
}
Example:
body {
position: relative;
height: 200vh;
background: linear-gradient(orange 0, red 50%, pink 100%);
}
.dropdown{
position: fixed;
width: 140px;
height: 180px;
background-color: blue;
}
<div class="dropdown">
</div>