I'm attempting to make a fixed top menu. On a viewport > 1170px (which is my minimum page viewport here), everything is ok. On viewport less than 1170px, main content of the page is horizontally scrollable (ok), but `#main-menu` is displayed only up to current window height, so the last items are hidden.

Is is possible to make this menu fixed *and* to act like a part of the scrollable content? 

The site will be *not* responsive.

**HTML:**

```
<nav id="main-menu">
    <div class="container">
        <ul class="nav">
            <li id="item1"><a href="#">Menu item 1</a></li>
            <li id="item2"><a href="#">Menu item 2</a></li>
            <li id="item3"><a href="#">Menu item 3</a></li>
            <li id="item4"><a href="#">Menu item 4</a></li>
            <li id="item5"><a href="#">Menu item 5</a></li>
        </ul>
    </div>
</nav>

<div id="content">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum odio et interdum pretium.</p>
    </div>
</div>

```

**CSS**

```
body {
  background-color: #000;
  color: #fff;
  font-size: 17px;
  min-width: 1170px;
}
.container {
  width: 1170px;
}
#main-menu {
  position: fixed;
  height: 68px;
  width: 100%;
  display: block;
  top: 0px;
  z-index: 500;
}

#content {
  position: relative;
  top: 150px;
}

```

**DEMO:**
<http://jsfiddle.net/zyqkrwtk/1/>

I know it is partially solvable by setting `overflow-x: auto` to menu, but there will be extra scrollbar, which is not desirable.

**EDIT:** Sorry, I forgot to mention important thing - the page content is actually very long (it will be one-page microsite), so the fixed position is therefore desirable. **Updated demo** - <http://jsfiddle.net/fvgf2mj6>