Why does PayPal Iframe stays above the fixed navbar?

user_7637448 0
Viewed 395

I've added the PayPal Checkout button from this link here. The problem I encountered is that iframe where PayPal buttons are present stay above my fixed navbar on the page. Why is this happening and how do I put it back at the top?

I've tried to read the documentation but nothing seems to mentions this behavior. I've also tried to change the z-index to my navbar, but that didn't help.

Here is css of my navbar.

.top {
  background-color: black;
  height: 50px;
  width: 100%;
  position: fixed;
  z-index: 5;
  top: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  color: white;
}
<nav class="top"></nav>

paypal css html
2 Answers

In your CSS, target the iframe element and try adding this code

position: relative;
z-index: 0;
user_145212570 
iframe {
  z-index: 0 !important;
}

This CSS code snippets can work for your case. I faced the same problem on my WordPress installation, and I was able to fix the issue with this. I hope it will be useful to you.

user_180047240
Related