Make menu bar fixed on top when scrolling - html

Question

I have a menu bar and it consists of two divs. In the end it looks like only a single menu bar. And I need this menu bar to be fixed on top when I scroll down the page.
My HTML code:
<div id="body">
<header id="header">
<div class="inner">
<div id="topmenu">
Login
</div>
<div id="social" class="icons">
<span>Twitter</span>
<span>Facebook</span>
<span>Linked In</span>
</div>
</div>
</header>
</div>
And my CSS:
#header .inner #topmenu {
float: right;
width: 50%;
height: 30px;
background-color: #5f5f5f;
}
#header .inner #topmenu .login {
text-decoration: none;
float: right;
background:url('images/loginlink.png') no-repeat 40px 12px;
padding-right: 20px;
padding-top: 5px;
color: white;
}
#header .inner .icons {
float: left;
width: 50%;
height: 30px;
background-color: #5f5f5f;
}
#header .inner .icons .twitter span {
display: none;
}
#header .inner .icons .twitter {
width: 20px;
height: 20px;
display: inline-block;
background:url('images/i_twitter.png') no-repeat center center;
padding-top: 10px;
padding-left: 10px;
}
Note: I need to have this menu bar "broken" into two parts like this. I cannot modify HTML, I'm able to modify only the CSS file.
Link to example.
Is there any solution how to fix that without using JavaScript?

Answer 1

You can set .inner with position:fixed;top:0
#header .inner{
width:100%;
position:fixed;
top:0px;
}
Example