'Fixed elements (such as navbar) move on mobile (only production version not development), why?

So, for some reason, a secondary navbar that I created moves on Scroll, even though the position is fixed. That only happens on mobile only and only in the production version. It is not a problem on development. (Same goes for some other fixed elements such as an intercom chat).

This is the CSS:

.BuyNavbarOnScroll {
  background-color: #0a4525;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  position: fixed !important;
  top: 50px;
  width: 100%;
  z-index: 5;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

Any Idea why it's happening? Problem Depiction

htmlcssreactjs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions