Search code examples
jquerycsstwitter-bootstrapnavbarrgba

White bootstrap navbar turning transparent over paragraph

I've been working on a navigation that would gain opacity and minify the logo once scrolled past the header -- all well, except for when the navbar overlays a paragraph on a white background, it turns transparent & creates a visual mess. I'm guessing it might be a problem with using rgba? I want to keep opacity, would be grateful on any suggestions how to do so.

Demo here: http://mockturtlesoup.github.io/Hi-Will/#

Solution

  • The z-index property in CSS controls the vertical stacking order of elements that overlap. There is no fixed value for this property but you can use higher value to stack element on the top of other elements. Following css will also works.

    #header {
 z-index: 9;
}