Search code examples
htmlcsspositionfixed

Positioning fixed header


This is a tricky one, for me at least. I have a page that needs to scroll horizontally. At the top of the page is a menu that needs to stay in the same place the whole time centered on the page. Even if I were to use jQ I am unsure how to achieve this as it appears I need to position the same div two different ways.

Here is the page:

http://www.coflash.com/testing/raycollins/gall1.php

The scrollbar is not appearing for some reason either, but works fine in the old code on this site:

http://www.raycollinsphoto.com

Any ideas?


Solution

  • For the scroll add in body overflow-x:scroll; This will show the horizontal scroll bar.

    About the header you can use position:fixed; and width:100% and z-index:10; so the final css for #headerwrap will be:

    #headwrap {
        background-color: #1C1C1C;
        position: fixed;
        width: 100%; /* to take the width of all screen */
        z-index: 10; /* In small screens the images override the header */
    }