Banner Overlay Still Displaying Nav-Bar Elements

I have placed a banner on my website - its called “Sign Up Banner” - symbol. The way it works is that its triggered by a button click and should overlay on the existing webpage. However currently during the overlay, it is still displaying the Nav bar text elements, image and button. I suspect that is because I placed the nav-bar within the first section and made its placement an absolute - pinned to the top. I had to do this so it was visible based on the template I was using.

If anyone has any ideas or advice how I can cover the nav-bar elements underneath the banner overlay I would strongly appreciate it!


Website Read Link: Webflow - Skippet
Image of nav bar elements showing: Screenshot by Lightshot

Any help will be strongly appreciated!

Hey @AdamMMB , this can be fixed by using z-index. Your Navbar’s z-index is 9999 whereas your banner overlay is only 3.

Change Navbar's z-index to 10 and then change the z-index of your banner overlay to 20 and you should be good to go.

Absolute legend. Thank you so much!

1 Like

Ayeee my guy! Don’t make me blush :eyes:, Happy Designing :grin::+1:t4:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.