CODEWITHSUNDEEP
css
AJcodez
AJcodez

Reputation: 34216

Way to make content that scrolls under a navigation bar invisible but the bar have transparency

I have no idea how to go about this:

I have a full-screen background image, a navigation bar with 50% transparency fixed to the top, and content below it. How can I have the navigation bar maintain transparency over the background image, and still have scrolling content?

The issue right now is that when I scroll down, the content goes under the navigation bar, and shows through the transparency, which obviously looks awful.

Basically, I want the content of the page to scroll and disappear at the bottom of the navigation bar. I know I could make the navigation bar opaque and use a background image for that too, but I'd rather just have the one full-screen background image.

Thoughts?

Upvotes: 0

Views: 3359

Answers (2)

Tristan
Tristan

Reputation: 11

I know this is very old but I spent a lot of time looking for the answer and found a good solution so I will post it for anyone else looking for it.

Place the navbar in the element containing the background image and set the navbar's background to inherit. This prevents content from appearing behind the navbar as you scroll down.

Upvotes: 1

Cimbali
Cimbali

Reputation: 11405

Put the contents in a block (div) that has fixed size, say stretch it to the whole page except the size of the navigation bar. Then make that div scrollable with css property overflow:scroll

Upvotes: 2

Related Questions