Show fixed width top bar on horizontal scroll

Question

HTML

---

<div id="headers">
    <header>
        <div id="Logo">
            <img alt="SiteLogo" title="KAS" src="Images/kas.png" />
        </div>
        <div id="LogoText">Sample Site</div>
        <nav>
            <ul>
                <li><a href="#">HOME</a>

                </li>
                <li><a href="#">ABOUT US</a>

                </li>
                <li class='has-sub '><a href="Products.aspx">PRODUCTS</a>

                    <ul>
                        <li><a href="#">Item 1</a>

                        </li>
                        <li><a href="#">Item 2</a>

                        </li>
                        <li><a href="#">Item 3</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">SERVICES</a>

                </li>
                <li id="current"><a href="#">ENQUIRY</a>

                </li>
            </ul>
        </nav>
    </header>
</div>

Fiddle

---

Demo

Full Page Result

Issue

---

As you can see in the Demo i'm not able to access the all the menu but if it is in full page like Full Page Result i'am able to access all the menu's

Needed:

---

What I need is the following

• Header should be fixed to the top
• i need to scroll horizontally and access all the menus even if i change the width of the browser

Answer 1

Well, this isn't possible with pure CSS, because that's how the position: fixed; behaves, if you want a jQuery solution, which am aware that you haven't tagged, but you don't have any other way.. (Or using JS)

$(document).on('scroll', function() {
    $('#headers').css('top', $(this).scrollTop());
});

Demo

Here, I am nudging the top property on scroll of the document, so your element stays position: absolute; but it will behave as if it's fixed.

Just make sure that you get rid of position: fixed; from #headers, you won't need that now, also, header background will chop off as it exceeds the viewport so assign some height to your header element and assign background-color as well

header {
    width: 1000px;
    height: 80px;
    margin: 0px auto;
    padding: 0px;
    top: 0;
    background-color: #333;
}

Demo 2

Demo 2 (Full page, use the inner scroll bar, not the outer one)

Answer 2

I just added overflow scroll to yours and it works for me.

overflow:scroll;

fiddle here

Answer 3

To achieve the result you want you need to add overflow-x: auto to your CSS.

#headers {
    width: 100%;
    background-color: #333;
    margin: 0px 0px 0px 0px;
    top: 0;
    position: fixed;
    z-index:600;
    overflow-x: auto; /* Added this */
}

I've made a demo here. But like others have said you should really look into responsive layouts to make your page more user friendly