Make menu bar fixed on top when scrolling

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">
        <a href="#" class="login">Login</a>
    </div>

    <div id="social" class="icons">
        <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
        <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
        <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
    </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