How can I make my navigation bar (which has transparent background) to float/overlap my background in a parallax-scrolling webpage?

Question

I am trying to design a webpage where navigation bar has no background and it floats over background image. However, This being a parallax-scrolling website, as soon as page is scrolled to second section, my navigation bar pushed the background down by the size of it's own width.

I require it to float over my sections.

Thanks.

Answer 1

Your question is rather vague.

Where do you want the navigation bar to sit and at what size?

If you want the navigation bar to remain at the top of viewport throughout your sections, set it to, position fixed; top 0; left: 0; z-index: 1000; position fixed; top 0; left: 0; z-index: 1000; (with whatever height and width you desire) then have your parallax layers on a carousel type parent DOM element