How to make a div hidden behind a fixed div while scrolling

Question

I have made a website where there is a navigation sidebar which position is fixed in the left and I have the content in the right side. Now when I shrink the browser window width a horizontal scroll bar is introduced. When I use that to scroll the content the content overflow's above the fixed left sidebar. I want the content to go behind the side bar so that its not collapsed. Please visit the site. Thank you.

Link to site

Answer 1

Set the background color and the z-index

.navigation {
    z-index:100;
    background-color: white;
}

Read more about the z-index

Answer 2

In css, set the background colour for #navigation to white and give it a higher z-index...

#navigation {
    background-color: white;
    z-index: 100;
}

Answer 3

You Need Yo Use z-index property

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order .

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

More At z-index

#navigation {
    background-color: white;
    z-index: 100;
}