Fix Header To Top Of Page With Horizontal Scroll

I have a navigation header at the top of every page. I'd like the user to be able to scroll the horizontal overflow with a scrollbar. I understand this isn't possible with just CSS

Solution 1:

You can use a version of my code:

functionreposition(){
    var el = document.getElementById('header');
    varScrollLeft = document.body.scrollLeft;
    if (ScrollLeft == 0)
    {
        if (window.pageXOffset)
            ScrollLeft = window.pageXOffset;
        elseScrollLeft = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;
    }
    el.style.left = "-" + ScrollLeft + "px";
}

Replace 'header' with your header's id.

Hope this helps!

Solution 2:

It's possible with CSS. Set your header to use overflow: auto;.

Example: http://jsbin.com/edopor/4/edit