Issues with HTML and CSS header bar layout

Question

I am trying to setup an HTML document that has a fixed position header bar that will contain all of the menu options for the app; The bar should be fixed to the top of the page. The actual content portion of the bar should have a minimum width of 1000px and should be contained within a wrapper that will fill all remaining space if the page with is >1000px, leaving the content portion centered within.

I have been able to do the following, using a display: fixed I can get the bar to stick to the top of the page when scrolling verticaly, but if the page is <1000px, horizontal scrolling does not reveal the rest of the bar, it sticks to its fixed 0,0 position.

Changing to display: relative, The bar behaves as expected when scrolling horizontally - I can see the right half of it - however this does not allow it to stay fixed to the top of the document when scrolling vertically. How can I adjust the following such that the bar behaves in this way.

HTML:

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Navigation -->
    <div id="nav_wrapper">

        <!-- Navigation Wrapper -->
        <div id="nav_content">

            <!-- Navigation Title -->
            <div id="nav_title">
                some content
            </div>
        </div>
    </div>

    <!-- Body -->

</div>

Navigation Bar css:

#wrapper {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150%;
    min-width: 1000px;
}

#nav_wrapper {
    display: block;
    position: fixed;
    width: 100%;
    height: 48px;
    top: 0px;
    left: 0px;
    min-width: 1000px;
}

#nav_content {
    display: block;
    position: relative;
    top: 0px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

Again, setting the nav_wrapper display style to fixed allows me to scroll vertically with the bar sticking to the top but does not allow me to scroll horizontally to view overflow content,

Setting it to relative allows me to scroll horizontally to view the overflow content of the bar but does not allow the bar to stick to the top of the page when I scroll vertically, I am looking to be able to do both.

Any and all help is greatly appreciated. Cheers.

Here is something working on jsFiddle

Edit

Maximillian posted an excellent working example with the behavior I am hoping to achieve, however using javascript. I am looking for a pure HTML / CSS solution if possible.

Answer 1

Let me know if this fixes your issue:

https://jsfiddle.net/nkf00r7L/4/ I changed the following css:

#wrapper {
    display: block;
    top: 0;
    left: 0px;
    width: 100%;
    height: 2000px;
    min-width: 1000px;
    background-color: #DDDDDD;

}

#nav_wrapper {
    display: block;
    position: fixed;
    width: 100%;
    height: 48px;
    top: 0px;
    left: 0px;
    min-width: 1000px;
    background-color: #000000;

}

Updated:

I noticed you wanted it to scroll horzontally!! I've added overflow: scroll on the wrapper.

https://jsfiddle.net/nkf00r7L/5/

Answer 2

I'm pretty sure that you can't get fixed position divs to scroll along with the window by using pure HTML and CSS, so here is a JavaScript solution.

Live Demo:

var nav_wrapper = document.getElementById("nav_wrapper");
window.onscroll = function() {
    nav_wrapper.style.left = -pageXOffset + "px";
};

#wrapper {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150%;
    min-width: 1000px;
    background: gray;
}

#nav_wrapper {
    display: block;
    position: fixed;
    width: 100%;
    height: 48px;
    top: 0px;
    left: 0px;
    min-width: 1000px;
    background: blue;
}

#nav_content {
    display: block;
    position: relative;
    top: 0px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background: red;
}

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Navigation -->
    <div id="nav_wrapper">

        <!-- Navigation Wrapper -->
        <div id="nav_content">

            <!-- Navigation Buttons -->
            <div id="nav_main">
                Buttons
            </div>

            <!-- Navigation Title -->
            <div id="nav_title">
                Title
            </div>

            <!-- Navigation Options -->
            <div id="nav_options">
                Options
            </div>
        </div>
    </div>

    <!-- Body -->

</div>

JSFiddle Version: https://jsfiddle.net/2j2mx5mu/